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

//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、 高度自适应
时间: 2024-10-10 02:18:36

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

(转)iFrame高度自适应

第一种方法:代码简单,兼容性还可以,大家可以先测试下: function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offset

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'.这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据.这

[转载]跨域iframe高度自适应

场景: 经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢? 解决: 在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的iframe(称为M2页面),它的src与主页面(称为M1页面)同域,当P页面载入完成,计算出此页面的高度,然后创建隐藏iframe(M2页面),设置M2的src属性,将高度附加到M2的url后面,如http://localhost/proxy.html#height=582,代码: 1 (function

CSS完美实现iframe高度自适应(支持跨域)

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自动适应,这一点让很多人都头疼万分.百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题.网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用).难道真的没有一种可行的解决方案了

完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多人都头疼万分.百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题.网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用).难道真的没有一种可行的解决方案了吗? No

iframe的跨域高度自适应(通过跨域页面中嵌套本域页面)

实习不久接到一个任务,在网页中嵌套另一个工程的网页.本以为这是轻而易举的一件事情,结果被测试姐姐折腾得够呛.多次和我谈心说到这个高度固定导致iframe出现滚动条有多么不好看,对于工程整体的影响有多么恶劣.因为跨域的原因,这个需求被拖了许久,真是很痛苦的一件事.最终在我离开公司之前搞定了这个单. 这里就把我的研究过程写下来以供大家参考. 首先需要了解一下何为同域,何为跨域: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名

总结iframe高度自适应,自适应子页面高度

在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下. 页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <iframe id="mainFrame" name="main

同域iframe的高度自适应

引子 父页面里控制子页面 子页面里控制父页面 一.引子 我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 1.html <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>1.html</title> </head> <body> <iframe id="ifr" sr