iframe用法大全

iframe缺点

iframe需要发起二次请求，多了一次请求来拿很多很多的资源，如果html文档response没有返回，那整个iframe就出现404.

iframe优点

广告一般两种嵌入方式

1、js接进来，绘制标签，发送请求，把嵌套位置渲染成广告，但运营商更改了，这段js或js本身报错，页面的渲染从这里开始就暂停了，会干扰正常页面正常工作。

2、iframe不会有这样的问题，iframe报错会在iframe页面里，iframe做跨域。

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。

 

Iframe有什么好处，有什么坏处？

http://www.zhihu.com/question/20653055

js操作iframe的一些方法介绍

http://www.codeweblog.com/js%e6%93%8d%e4%bd%9ciframe%e7%9a%84%e4%b8%80%e4%ba%9b%e6%96%b9%e6%b3%95%e4%bb%8b%e7%bb%8d/

iframe在html中的使用

 

iframe 自适应高度

一、JQ实现方法：

jquery代码１：
//注意：下面的代码是放在iframe内嵌的页面中调用
$(window.parent.document).find("#main").load(function(){
        var main = $(window.parent.document).find("#main");
        var thisheight = $(document).height()+30;
        main.height(thisheight);
});
jquery代码２：
//注意：下面的代码是放在和iframe同一个页面调用，即主页面
$("#main").load(function(){

         $(this).height(0);                             //   兼容chrome

           var mainheight = $(this).contents().find("body").height()+30;
           $(this).height(mainheight);
}); 

二、js实现方法

<iframe src="/en/product/ldsdf.html" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="reinitIframeEND();"  >

</iframe>                               

 <script type="text/javascript" language="javascript">     

function reinitIframe(){  

           var iframe = document.getElementById("iframepage");  

                     try{  

                                var bHeight = iframe.contentWindow.document.body.scrollHeight;  

                                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;  

                                var height = Math.max(bHeight, dHeight);  

                                iframe.height = 0;      //  兼容chrome   下面的清楚定时器可去掉

                               iframe.height = height;  

                       }catch (ex){}  

            }  

           var timer1 = window.setInterval("reinitIframe()", 500); //定时开始  

            function reinitIframeEND(){  

                      var iframe = document.getElementById("iframepage");  

                     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.clearInterval(timer1);  

}  

</script>  

iframe调用父窗口与父窗口调用iframe方法

iframe调用父窗口：window.parent.document.getElementById('frmright').src

父窗口调用iframe：iframe.contentWindow.functionName()

window.location.href、location.href是本页面跳转

parent.location.href是上一层页面跳转

top.location.href是最外层的页面跳转

contentwindow

contentWindow 兼容各个浏览器，可取得子窗口的 window 对象。

 contentWindow属性是指指定的frame或者iframe所在的window对象

contentDocument 属性能够以 HTML 对象来返回iframe中的文档。可以通过所有标准的DOM方法来处理被返回的对象。

语法：frameObject.contentWindow或者iframeObject.contentWindow

 

Iframe易于嵌套及管理页面，但经常遇到跨域、父子页面访问问题，对于子页面访问父页面可以兼容性地通过window.Top或window.Parent或window.frameElement等操作

主要知识点

1：document.getElementById("ii").contentWindow得到iframe对象后，就可以通过contentWindow得到iframe包含页面的window对象，然后就可以正常访问页面元素了；

2：$("#ii")[0].contentWindow 如果用jquery选择器获得iframe，需要加一个【0】；

3：$("#ii")[0].contentWindow.$("#dd").val()可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;

4：$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";可以通过这种方式向iframe页面传递参数，在iframe页面window.hellobaby就可以获取到值，hellobaby是自定义的变量；

5：在iframe页面通过parent可以获得主页面的window，接着就可以正常访问父亲页面的元素了；

6：parent.$("#ii")[0].contentWindow.ff;同级iframe页面之间调用，需要先得到父亲的window，然后调用同级的iframe得到window进行操作； 

iframe跨域

附：Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系：Windwo对象→Parent对象→Frame对象→Document对象→Form对象

一般分两种情况：

一、 是同主域下面，不同子域之间的跨域；

父页访问子页：document.getElementById("myframe").contentWindow.document来访问

若支持contentDocument也可以直接document.getElementById("myframe").contentDocument

子页访问父页：可以parent全局属性

即上面总结的内容

二、 是不同主域跨域；

待百度

iframe ajax 跨域

iframe ajax 刷新

iframe 跨域

在谷歌浏览器中总是提示如下错误（谷歌访问本地html页面会出现下面的错误）
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. 

未捕获的安全错误：阻止了一个域为null的frame页面访问另一个域为null的页面。

也许你是在本地直接用浏览器打开的、地址栏是file:///的页面吧。可以试着在本地架设服务器来调试

于是自己摸索，后来才发现，谷歌浏览器其实那种方法其实也可以，只是很奇怪，必须发布后才可以，在文件系统中调用，就会出现上边的错误。 

iframe 子页面和父页面必须属于同一个域下。（这个问题，一般在本地页面来做到，是不太可能的，经常会有这个错误出现 “Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.”，故而一般的解决方案是放在服务器上去访问。 ）

自我总结部分：

当从A页面跳转到B页面时，无法获取B页面iframe里的id值，但可以通过查找其内部所有的元素内容之后再获取其id值 ；

例：varanchor=$(“iframeID”).contents().find(“#id”);

 

Iframe不好控制   

1、iframe火狐锚点无效

2、iframe高度自适应（需用js控制）

3、iframe跨域访问

4、刷新页面iframe在ie和chrome里的内容将回到原始状态