iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

来源于crm项目的contact/edit.html

一、背景是这样的

最近在做crm系统的前端页面,有一个页面呢,点击“查看全部信息”时会弹出,这个弹窗里面又有分页导航,分页不是使用ajax 异步刷新请求写的,而是通过刷新页面。由于整站的分页都是使用这个方法,所以不可能让后端同事用ajax重写一个分页,所以呢,就想到使用iframe框架,把这个弹窗写在html文件,放在iframe中完成。一切都是perfect的想法。

二、问题来了!解决问题

技术分享

此时不仅仅是没有高度自适应而且还报错,其实这报的错的是域为空,因为我没有放在同一个域中来运行代码。

解决方法是:把这些页面都放在apache服务器下运行,也就是保证他们有域,且在同一个域中。

好的,现在就是代码不报错,我们此时只需要再用js获取一下这个div的高度就好了。

/* 联系人contact */
(function(){
    var contact = {
        reinitIframe:function(){
            var iframe = document.getElementById("iframe-div");
            try{
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.max(bHeight, dHeight);
                iframe.height = height;
            }catch (ex){
            }
            // window.setInterval("reinitIframe()", 200); 函数调用挪到页面中  
        }
    };
    window.contact = contact;
})()

 

我习惯把方法保存在一个对象中,这样维护起来方便点。

现在获取高度的方法写好,接着就是在页面中去调用这个方法

 <script type="text/javascript" src="../../../resource/js/crm.js"></script>
    <script>
    // iframe 自适应高度  
    $(function(){
        window.setInterval("contact.reinitIframe()", 200);  
    });
    </script>

 

一切就绪,我们在本地服务器执行一下代码。如图1:

技术分享 

我们直接用浏览器打开,如图2:

!!如果有人也是使用iframe嵌套进去的方法,页面中的内容高度不再自适应了,此时计算div的高度的方法又是没错的,那么有可能就是没有把页面方法同一个域中去执行,所以的解决的方法就是可以放在服务器下去执行。如果你是使用浏览器直接打开,那么使用的可能是file协议,所以才会导致浏览器报错,说域为空。下次出错就试试放在服务器下去执行吧。可以直接下个wamp安装包,把页面代码扔进来执行。

技术分享

三、学习到的

1、报错要善于从报错信息找出问题所在。我一开始没有想到是文件没有在同一个域中的问题,一直以为是我js获取内容高度出错 ,所以一直在这个js函数中找错误,后来认真看了报错信息,才知道原来是没在同一个域中。打脸~

2、使用到了iframe去嵌套页面,虽然网上各种批评iframe框架执行效率低之类,但是能解决问题的就是好的吧。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。