首页>>前端>>JavaScript->JS对Iframe内外页面进行操作

JS对Iframe内外页面进行操作

时间:2023-11-29 本站 点击:0

在iframe外获取iframe里的内容

方式一

通过contentWindow和contentDocument这两个API:

variframe=document.getElementById("iframe1");variwindow=iframe.contentWindow;varidoc=iwindow.document;varidocument=iframe.contentDocument;console.log("window",iwindow);//获取iframe的window对象console.log("document",idoc);//获取iframe的documentconsole.log("html",idoc.documentElement);//获取iframe的html

其中iframe.contentWindow可以获取iframe的window对象,iframe.contentDocument可以获取iframe的document对象。

方式二

结合Name属性,通过window提供的frames获取:

<iframesrc="/index.html"id="ifr1"name="ifr2"scrolling="yes"><p>Yourbrowserdoesnotsupportiframes.</p></iframe><scripttype="text/javascript">console.log(window.frames['ifr2'].window);console.dir(document.getElementById("iframe").contentWindow);</script>

在iframe内获取iframe外的内容

window.parent获取上一级的window对象,如果还是iframe则是该iframe的window对象window.top获取最顶级容器的window对象,即,就是你打开页面的文档

在iframe中调用父页面中定义的方法和变量

window.parent.window.parentMethod();window.parent.window.parentValue;

在父页面操作iframe子页面的方法和变量

window.frames["iframe_Name"].window.childMethod();window.frames["iframe_Name"].window.childValue;

总结

在使用Iframe时还需要注意以下两点:

要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误;

如果iframe所链接的是外部页面,因为安全机制不能使用同域名下的通信方式;

判断iframe加载完成

iframe.onload=function(){//TODO}

不同域通信

父页面向子页面传递数据

利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data。

子页面向父页面传递数据

利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面同域通信方式的实现原理,把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/JavaScript/704.html