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

 更新时间:2017年06月15日 10:26:26   投稿:daisy  
这篇文章主要给大家介绍了利用JS对iframe父子(内外)页面进行操作的方法教程,其中包括了怎么对iframe进行操作、在iframe里面控制iframe外面的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对象,即

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

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

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

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

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

1
$("#objid",parent.document)

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

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

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

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

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

总结

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://caibaojian.com/js-get-iframe.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • javascript发送短信验证码实现代码

    javascript发送短信验证码实现代码

    我们在注册账号,或者是参加活动时,都会向手机发送收短信验证码,短信验证码到底是如何实现的,本文为大家揭晓,并为大家分项1javascript发送短信验证码实现代码,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • javascript removeChild 导致的内存泄漏

    javascript removeChild 导致的内存泄漏

    最近看到司徒正美的一篇文章《移除DOM节点》,文中说到在IE中移除容器类节点,会引起内存泄露。
    2010-08-08
  • 使用JS轻松实现ionic调用键盘搜索功能(超实用)

    使用JS轻松实现ionic调用键盘搜索功能(超实用)

    这篇文章主要介绍了使用JS轻松实现ionic调用键盘搜索功能(超实用)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • JS中如何实现点击a标签返回页面顶部的问题

    JS中如何实现点击a标签返回页面顶部的问题

    这篇文章主要介绍了JS中实现点击a标签返回页面顶部的问题,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-01-01
  • JS+DIV实现鼠标划过切换层效果的方法

    JS+DIV实现鼠标划过切换层效果的方法

    这篇文章主要介绍了JS+DIV实现鼠标划过切换层效果的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • Bootstrap table使用方法总结

    Bootstrap table使用方法总结

    这篇文章主要总结介绍了Bootstrap table的使用方法,服务器分页、客户端分页的转换,table刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 在JavaScript中使用timer示例

    在JavaScript中使用timer示例

    这篇文章主要介绍了在JavaScript中如何使用timer,并给出各种测试case的例子,需要的朋友可以参考下
    2014-05-05
  • JS实现不规则TAB选项卡效果代码

    JS实现不规则TAB选项卡效果代码

    这篇文章主要介绍了JS实现不规则TAB选项卡效果代码,通过简单的JavaScript响应鼠标事件动态变换元素样式实现不规则选项卡效果,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • javascript prototype原型操作笔记

    javascript prototype原型操作笔记

    在 JavaScript 中,prototype 不但能让对象共享自己财富,而且 prototype 还有寻根问祖的天性,从而使得先辈们的遗产可以代代相传。
    2009-12-12
  • jsonp跨域请求实现示例

    jsonp跨域请求实现示例

    本文主要介绍了jsonp跨域请求实现示例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论