如何用JS操作iframe父子(内外)页面

本文主要介绍使用JS操作iframe父子(内外)页面的方法，分享给大家参考。我们来看看详细的介绍：

首先，获取iframe中的内容

在我们开始之前，让我们看看如何在iframe中获取内容。获取iframe内容的两个主要API是contentwindow和Content document iframe。内容窗口。获取窗口对象iframe.contentDocument和获取iframe的文档对象只是DOM节点(即getELement系列对象)提供的方法

var iframe=document . getelementbyid(' iframe 1 ')；var iwindow=iframe . content window；var idoc=iwindow.documentconsole.log('window '，iwindow)；//获取iframe的window对象console.log('document '，idoc)；//获取iframe的document console . log(' html '，idoc . document element)；//获取iframe的htmlconsole.log ('head '，idoc . head)；//获取headconsole.log ('body '，idoc . body)；//获取身体的实际情况，如：

此外，更简单的方法是组合名称属性，并通过窗口提供的框架获得它。

iframe src='/index . html ' id=' IFR 1 ' name=' IFR 1 '滚动='yes' pYour浏览器不支持iframe。/p/iframescript类型=' text/JavaScript ' console . log(window . frames[' IFR 1 ']。窗口)；console . dir(document . getelementbyid(' IFR 1 ')。content WiNDOW)；/script实际上，window.frames['ifr1']']返回一个window对象，即

Window.frames['ifr1']===window这取决于您想要以哪种方式获取窗口对象。两者都可以，但我更喜欢第二种使用框架的方式[xxx]。因为字母很少，嘿~然后，就可以操纵iframe中的DOM内容了。

其次，获取iframe中的父内容

同样，在同一个域中，父页面可以获取子iframe的内容，所以子iframe也可以操作父页面的内容。在iframe中，可以通过安装在window上的几个API来获取。

Window.parent获取上层Window对象，如果它是iframe，它就是iframe的window对象。window.top获取顶层容器的window对象，即打开页面的document window.self返回自己窗口的引用。可以理解，window===window.self(脑损伤)如图3360所示。

拿到之后，我们可以做相关的操作。在同领域iframe中，我们可以巧妙地利用iframe的黑技术来实现一些小技巧。

iframe轮询

换句话说，很久以前，我们用iframe异步发送请求~！那就是今天！真实历史数据证明(我自己谷歌)，当时为了不跳转到页面，使用了iframe提交表单。目前尼玛的前端发展真的很快。websocket、SSE、ajax等等，技巧的出现颠覆了iframe，现在基本只能活在IE8、9的浏览器里。不过宝宝觉得没必要知道iframe，但现实如此残酷，我们还是需要兼容IE8。因此，我们仍然需要涉猎iframe来实现长轮询长连接的技巧。

Iframe长轮询

如果你写过ajax童鞋，应该知道长轮询是在ajax readyState=4时再次执行原始函数。在这里使用iframe也是如此。异步创建iframe，然后重载，与后台协商，看后台兄弟把返回的信息放进去，然后获取里面的信息。来，直接放在身体里。

var iframeCon=document . queryselector(' # container ')，text//传递的信息var iframe=document . create element(' iframe ')、iframe.id=' frame '、iframe . style=' display : none；'，iframe.name='polling '，iframe . src=' http : target . html '；iframecon . appendchild(iframe)；iframe . onload=function(){ var iloc=iframe . content window . location，idoc=iframe.contentDocumentsetTimeout(function(){ text=idoc . getelementsbytagname(' body ')[0]。textContentconsole.log(文本)；iloca . reload()；//刷新页面，再次获取信息，触发onload函数}，2000)；}这样就可以实现ajax的长轮询效果。当然，这里我们只使用reload来获取信息，也可以通过添加iframe和删除iframe来发送信息，根据具体场景进行应用。此外，js文件可以在iframe中异步加载。但是iframe和homepage共用一个连接池，所以还是很痛苦的。现在基本上被XHR和硬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 ')。文件)5。在iframe中调用父页面中定义的方法和变量：

window . parent . window . parent method()；window . parent . window . parent value；6.操作父页面上iframe子页面的方法和变量

window . frames[' iframe _ ID ']. window . childmethod()；window . frames[' iframe _ ID ']. window . child value；一、同域父子页面间的交流

父页面parent.html

htmlhead脚本类型='text/javascript '函数say(){ alert(' parent . html ')；}函数call child(){ my frame . window . say()；my frame . window . document . getelementbyid(' button ')。value=“调用结束”；}/script/head body输入id=' button' type=' button' value='调用函数say()' onclick=' callChild()'/Iframe name=' my frame ' src=' http:http://caibaojian.com/child.html'/iframe/body/html子页面child.html

htmlhead脚本类型='text/javascript '函数say(){ alert(' child . html ')；}函数callParent(){ parent . say()；parent . window . document . getelementbyid(' button ')。value=“调用结束”；}/script/head body输入id=' button' type=' button' value='在parent.html中调用say()函数' onclick=' call parent()'//body/html注释

为确保操作在iframe加载后执行，如果iframe在IFRAME加载前开始调用其方法或变量，将会出现错误。有两种方法可以判断是否加载了iframe:

1.在iframe上使用onload事件

2.使用document.readyState=='complete '来判断

二、跨域父子页面通信方法

如果iframe链接到外部页面，则安全机制不能在同一域名下使用通信模式。

1.父页面将数据传输到子页面

实现技术是利用位置对象的哈希值通过它传输通信数据。在父页面中iframe的src后添加一个数据字符串，然后在子页面中以某种方式立即获取此处的数据，例如：

1.1通过setInterval方法在子页面设置定时器，并监听location.href的变化，得到上述数据信息

1.2.则该子页面根据该数据信息执行相应的逻辑处理

2.子页面将数据传输到父页面

实现技巧是使用代理iframe，它嵌入在子页面中，并且必须与父页面在同一个域中。然后，充分利用上述第一种通信方式的实现原理，将子页面的数据传输给代理iframe。然后，因为代理iframe和主页面在同一个域中，所以主页面可以获取同一个域中的数据。使用window.top或window.parent.parent获取浏览器中最顶层窗口对象的引用。

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。谢谢你的支持。