脚本宝典收集整理的这篇文章主要介绍了JS如何对Iframe内外页面进行操作总结,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
通过contentWindow和contentDocument这两个API:
VAR iframe = document.getElementById("iframe1"); var iwindow = iframe.contentWindow; var idoc = iwindow.document; var idocument = iframe.contentDocument; console.LOG("window",iwindow);//获取iframe的window对象 console.log("document",idoc); //获取iframe的document console.log("htML",idoc.documentElement);//获取iframe的html
其中iframe.contentWindow可以获取iframe的window对象,iframe.contentDocument可以获取iframe的document对象。
结合Name属性,通过window提供的frames获取:
<iframe src ="/index.html" id="ifr1" name="ifr2" scrolling="yes"> <p>Your browser does not support iframes.</p> </iframe> <script tyPE="text/javascript"> console.log(window.frames['ifr2'].window); console.dir(document.getElementById("iframe").contentWindow); </script>
window.parent 获取上一级的window对象,如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象,即,就是你打开页面的文档
window.parent.window.parentMethod(); window.parent.window.parentValue;
window.frames["iframe_Name"].window.childMethod(); window.frames["iframe_Name"].window.childValue;
在使用Iframe时还需要注意以下两点:
iframe.onload = function() { // TODO }
父页面向子页面传递数据
利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data。
子页面向父页面传递数据
利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面同域通信方式的实现原理,把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。
到此这篇关于JS如何对Iframe内外页面进行操作的文章就介绍到这了,更多相关JS对Iframe页面操作内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
@H_419_126@ 您可能感兴趣的文章:以上是脚本宝典为你收集整理的JS如何对Iframe内外页面进行操作总结全部内容,希望文章能够帮你解决JS如何对Iframe内外页面进行操作总结所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。