码迷,mamicode.com
首页 > Web开发 > 详细

【iframe】iframe处理(插入全局style并且允许常用事件冒泡、替换html、 高度自适应)

时间:2016-07-23 13:43:07      阅读:684      评论:0      收藏:0      [点我收藏+]

标签:

//iframe处理(插入全局style并且允许常用事件冒泡、替换html、 高度自适应) 
$.fn.fnIframe = function(Html, IsAutoHeight) {

    this.each(function() {

        var iframe = this,
            $iframe = $(this);

        if (iframe.localName === ‘iframe‘) {

            var $iWindow = $(iframe.contentWindow),
                $iDocument = $(iframe.contentDocument);
            var uniqueness = new Date().getTime();
            var style = ‘<style id="_iframeStyle_">body{font-size:14px;font-family:Tahoma,Helvetica,Arial,sans-serif;margin:0;padding-bottom:1px}body>*:first-child{margin-top:0}</style>‘;
            var html = (Html || ‘‘) + ‘<div id="‘ + uniqueness + ‘" hidden></div>‘;
            var addEvevts = function() {
                $iWindow.mousedown(function() {
                    $iframe.parent().trigger(‘mousedown‘);
                });
                $iWindow.mouseup(function() {
                    $iframe.parent().trigger(‘mouseup‘);
                });
                $iWindow.click(function() {
                    $iframe.parent().trigger(‘click‘);
                });
            };
            var iframeLoad = function(Func) {
                $iframe.load(function() {
                    $iDocument = $(iframe.contentDocument);
                    if ($iDocument.find(‘#_iframeStyle_‘).length === 0) {
                        $iDocument.find(‘head‘).prepend(style);
                    }
                    if (Func && $iDocument.find(‘#‘ + uniqueness).length === 0) {
                        Func($iDocument);
                    }
                });
            };

            if (arguments.length === 0) { //edit  
                if ($iDocument.find(‘#_iframeStyle_‘).length === 0) {
                    $iDocument.find(‘head‘).prepend(style);
                    iframeLoad();
                }
                if (!$iWindow.data(‘isInit‘)) {
                    $iWindow.data(‘isInit‘, true);
                    addEvevts();
                }
            } else { //info  
                if ($iDocument.find(‘#_iframeStyle_‘).length === 0) {
                    $iDocument.find(‘head‘).prepend(style);
                }
                $iDocument.find(‘body‘).html(html);
                if (IsAutoHeight === true) $iWindow.resize();
                iframeLoad(function($iDocument) {
                    $iDocument.find(‘body‘).html(html);
                    if (IsAutoHeight === true) $iWindow.resize();
                });
                if (!$iWindow.data(‘isInit‘)) {
                    $iWindow.data(‘isInit‘, true);
                    addEvevts();
                    if (IsAutoHeight === true) {
                        var fResize = function() {
                            $iDocument = $(iframe.contentDocument);
                            $iframe.height(100);
                            var h = $iDocument.find(‘body‘).outerHeight(true);
                            $iframe.height(h);
                            setTimeout(function() {
                                $iWindow.one(‘resize‘, function() {
                                    fResize();
                                });
                            }, 500);
                        };
                        fResize();
                    }
                }
            }

        }

    });

    return this;

};



//使用情况  
$(‘#xxx‘).find(‘iframe‘).fnIframe(); //插入全局style并且允许常用事件冒泡  
$(‘#xxx‘).find(‘iframe‘).fnIframe(html); //插入全局style并且允许常用事件冒泡、替换html  
$(‘#xxx‘).find(‘iframe‘).fnIframe(html, true); //插入全局style并且允许常用事件冒泡、替换html、 高度自适应

 

【iframe】iframe处理(插入全局style并且允许常用事件冒泡、替换html、 高度自适应)

标签:

原文地址:http://www.cnblogs.com/af-art/p/5698477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!