利用JS对iframe父子(内外)页面进行操作的方法教程
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文主要给大家介绍了关于利用JS对iframe父子(内外)页面进行操作的方法,分享出来供大家参考学习,下面来一起看看详细的介绍:
一、获取iframe里的内容
在开始之前,首先我们来看看如何获取iframe里的内容,获取iframe中内容主要的两个API就是contentWindow
,和contentDocument iframe.contentWindow
, 获取iframe的window对象 iframe.contentDocument
, 获取iframe的document对象 这两个API只是DOM节点提供的方式(即getELement系列对象)
1 2 3 4 5 6 7 8 | var iframe = document.getElementById( "iframe1" ); var iwindow = iframe.contentWindow; var idoc = iwindow.document; console.log( "window" ,iwindow); //获取iframe的window对象 console.log( "document" ,idoc); //获取iframe的document console.log( "html" ,idoc.documentElement); //获取iframe的html console.log( "head" ,idoc.head); //获取head console.log( "body" ,idoc.body); //获取body |
实际情况如:
另外更简单的方式是,结合Name属性,通过window提供的frames获取.
1 2 3 4 5 6 7 | < iframe src = "/index.html" id = "ifr1" name = "ifr1" scrolling = "yes" > < p >Your browser does not support iframes.</ p > </ iframe > < script type = "text/javascript" > console.log(window.frames['ifr1'].window); console.dir(document.getElementById("ifr1").contentWindow); </ script > |
其实window.frames[‘ifr1’]
返回的就是window对象,即
这里就看你想用哪一种方式获取window对象,两者都行,不过本人更倾向于第二种使用frames[xxx].因为,字母少啊喂~ 然后,你就可以操控iframe里面的DOM内容。
二、在iframe中获取父级内容
同理,在同域下,父页面可以获取子iframe的内容,那么子iframe同样也能操作父页面内容。在iframe中,可以通过在window上挂载的几个API进行获取.
window.parent
获取上一级的window对象,如果还是iframe则是该iframe的window对象window.top
获取容器的window对象,即,就是你打开页面的文档window.self
返回自身window的引用。可以理解window===window.self
(脑残)
如图:
获取了之后,我们就可以进行相关操作了。 在同域的iframe中,我们可以巧妙的使用iframe的黑科技来实现一些trick.
iframe的轮询
话说在很久很久以前,我们实现异步发送请求是使用iframe实现的~! 怎么可能!!! 真的史料为证(自行google), 那时候为了不跳转页面,提交表单时是使用iframe提交的。现在,前端发展真快,websocket,SSE,ajax等,逆天skill的出现,颠覆了iframe, 现在基本上只能活在IE8,9的浏览器内了。 但是,宝宝以为这样就可以不用了解iframe了,而现实就是这么残酷,我们目前还需要兼容IE8+。所以,iframe 实现长轮询和长连接的trick 我们还是需要涉猎滴。
iframe长轮询
如果写过ajax的童鞋,应该知道,长轮询就是在ajax的readyState = 4的时,再次执行原函数即可。 这里使用iframe也是一样,异步创建iframe,然后reload, 和后台协商好, 看后台哥哥们将返回的信息放在,然后获取里面信息即可. 这里是直接放在body里.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var iframeCon = docuemnt.querySelector( '#container' ), text; //传递的信息 var iframe = document.createElement( 'iframe' ), iframe.id = "frame" , iframe.style = "display:none;" , iframe.name= "polling" , iframe.src= "target.html" ; iframeCon.appendChild(iframe); iframe.onload= function (){ var iloc = iframe.contentWindow.location, idoc = iframe.contentDocument; setTimeout( function (){ text = idoc.getElementsByTagName( 'body' )[0].textContent; console.log(text); iloca.reload(); //刷新页面,再次获取信息,并且会触发onload函数 },2000); } |
这样就可以实现ajax的长轮询的效果。 当然,这里只是使用reload进行获取,你也可以添加iframe和删除iframe的方式,进行发送信息,这些都是根据具体场景应用的。另外在iframe中还可以实现异步加载js文件,不过,iframe和主页是共享连接池的,现在基本上都被XHR和hard calllback取缔了,这里也不过多介绍了。
1.js在iframe子页面操作父页面元素代码:
2.js在父页面获取iframe子页面元素代码如下:
3. jquery在iframe子页面获取父页面元素代码如下:
4. jquery在父页面获取iframe子页面的元素
5.在iframe中调用父页面中定义的方法和变量:
6.在父页面操作iframe子页面的方法和变量
1 2 | window.frames[ "iframe_ID" ].window.childMethod(); window.frames[ "iframe_ID" ].window.childValue; |
一、同域下父子页面的通信
父页面parent.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < html > < head > < script type = "text/javascript" > function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.window.document.getElementById("button").value="调用结束"; } </ script > </ head > < body > < input id = "button" type = "button" value = "调用child.html中的函数say()" onclick = "callChild()" /> < iframe name = "myFrame" src = "http://caibaojian.com/child.html" ></ iframe > </ body > </ html > |
子页面child.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < html > < head > < script type = "text/javascript" > function say(){ alert("child.html"); } function callParent(){ parent.say(); parent.window.document.getElementById("button").value="调用结束"; } </ script > </ head > < body > < input id = "button" type = "button" value = "调用parent.html中的say()函数" onclick = "callParent()" /> </ body > </ html > |
注意事项
要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:
1. iframe上用onload事件
2. 用document.readyState=="complete"
来判断
二、跨域父子页面通信方法
如果iframe所链接的是外部页面,因为安全机制就不能使用同域名下的通信方式了。
1.父页面向子页面传递数据
实现的技巧是利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data就可以了,例如:
1.1 在子页面中通过setInterval方法设置定时器,location.href
的变化即可获得上面的data信息
1.2. 然后子页面根据这个data信息进行相应的逻辑处理
2.子页面向父页面传递数据
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
javascript removeChild 导致的内存泄漏
最近看到司徒正美的一篇文章《移除DOM节点》,文中说到在IE中移除容器类节点,会引起内存泄露。2010-08-08
最新评论