首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用JS对iframe父子（内外）页面进行操作的方法教程

Posted in Javascript onJune 15, 2017

本文主要给大家介绍了关于利用JS对iframe父子（内外）页面进行操作的方法，分享出来供大家参考学习，下面来一起看看详细的介绍：

一、获取iframe里的内容

在开始之前，首先我们来看看如何获取iframe里的内容，获取iframe中内容主要的两个API就是contentWindow,和contentDocument iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取iframe的document对象 这两个API只是DOM节点提供的方式(即getELement系列对象)

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

实际情况如:

利用JS对iframe父子（内外）页面进行操作的方法教程

另外更简单的方式是，结合Name属性，通过window提供的frames获取.

<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['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(脑残)

如图:

利用JS对iframe父子（内外）页面进行操作的方法教程

获取了之后，我们就可以进行相关操作了。 在同域的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里.

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子页面操作父页面元素代码：

window.parent.document.getElementByIdx_x("父页面元素id");

2.js在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("子页面元素id");

3. jquery在iframe子页面获取父页面元素代码如下:

$("#objid",parent.document)

4. jquery在父页面获取iframe子页面的元素

$("#objid",document.frames('iframename').document)

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

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

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

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

一、同域下父子页面的通信

父页面parent.html

<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

<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.子页面向父页面传递数据

实现技巧就是利用一个代理iframe，它嵌入到子页面中，并且和父页面必须保持是同域，然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe，然后由于代理的iframe和主页面是同域的，所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对三水点靠木的支持。

利用JS对iframe父子（内外）页面进行操作的方法教程

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript编程起步（第六课）
Feb 27 Javascript
javascript模仿msgbox提示效果代码
Jun 10 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 #Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 #Javascript
详解vue跨组件通信的几种方法
Jun 15 #Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 #Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 #Javascript
JS自动生成动态HTML验证码页面
Jun 14 #Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 #Javascript
Spring Boot(5) EventBus(1) Spring-Retry(1) muduo(1) 多线程(6) TcpServer(1) Sqlite(2) ICF-5900W(2) Fragment(1) pt-archiver(1)
You might like
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
vue中遇到的坑之变化检测问题（数组相关）
2017/10/13 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
python Django批量导入数据
2016/03/25 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python实现tail -f 功能
2020/01/17 Python
python实现银行实战系统
2020/02/26 Python
python中二分查找法的实现方法
2020/12/06 Python
英国鹦鹉店：Parrot Essentials
2018/12/03 全球购物
中英文自我评价语句
2013/12/20 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
工作睡觉检讨书
2014/02/25 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
星际争霸：毕姥爷vs解冻03
2022/04/01 星际争霸
vue打包时去掉所有的console.log
2022/04/10 Vue.js
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers