iframe中父子窗口的调用

一、iframe标签详解

<iframe src="1.html" frameborder="0" id="child"></iframe>

(1)操作子窗口：frames['child'].contentDocument || frames['child'].document

1.首先获取iframe节点：

var myIframe = document.getElementById('child');
或
var myIframe = frames['child'];
或
var myIframe = window.frames['child'];
或
var myIframe = child;

window对象的frames属性返回一个类似数组的对象，成员是所有子窗口的window对象。比如，frames[0]返回第一个子窗口。如果iframe设置了id或name，那么属性值会自动成为全局变量，并且可以通过window.frames属性引用，返回子窗口的window对象。

window.frames['child'] === frames['child'] === child === document.getElementById('child');

2.然后获取iframe包含的document对象:

IE浏览器：

var childDocument = myIframe.document;

其他浏览器：

var childDocument = myIframe.contentWindow.document;
或
var childDocument = myIframe.contentDocument;

contentWindow属性获得iframe节点包含的window对象，
contentDocument属性获得包含的document对象，等价于contentWindow.document

注意：iframe元素遵守同源政策，只有当父页面与框架页面来自同一个域名，两者之间才可以用脚本通信，否则只有使用window.postMessage方法。

(2)操作父窗口：iframe.parent

iframe窗口内部，使用window.parent引用父窗口。如果当前页面没有父窗口，则window.parent属性返回自身。因此，可以通过window.parent是否等于window.self，判断当前窗口是否为iframe窗口。

if (window.parent !== window.self) {//当前窗口是子窗口var parentDocument = window.parent.document;
}

二、iframe中父子窗口操作实例

父页面：

<body>
<div id="myList">
</div>
<iframe src="1.html" frameborder="0" id="child"></iframe>
</body>

子页面：

<body>
<div id="content">
这是子页面
</div>
</body>

父页面调取子页面内容：

frames['child'].onload = function () {var childDocument = this.contentDocument || this.document;
}

子页面调取父页面内容：

if (window.parent !== window.self) {var parentDocument = window.parent.document;
}

iframe中父子窗口的调用相关推荐

QT中父子窗口事件传递与事件过滤器
处理监控系统的时候遇到问题,在MainWidget中创建多个子Widget的时候,原意是想鼠标点击先让MainWidget截获处理后再分派给子Widget去处理,但调试后发现如果子Widget重新实现 ...
C#中父子窗口之间实现控件互操作
很多人都苦恼于如何在子窗体中操作主窗体上的控件,或者在主窗体中操作子窗体上的控件.相比较而言,后面稍微简单一些,只要在主窗体中创建子窗体的时候,保留所创建子窗体对象即可. 下面重点介绍前一种,目前常见 ...
Iframe中跨域进行父子窗口进行通信的四种方法
一.跨域简介 1. 首先简单介绍一下什么是跨域当我们在浏览器的地址栏中输入一个地址的时候,这个地址通常包含四部分信息内容.这四部分信息包含:①协议.②域名.③端口.④资源位置. 其中前三部分将会决定 ...
从父页面在iframe中调用JavaScript代码
基本上,我将iframe嵌入到页面中,并且iframe具有一些我需要从父页面调用的JavaScript例程. 现在相反非常简单,因为您只需要调用parent.functionName() ,但是不幸的 ...
[easyui] 在iframe中操作父窗口的组件
在项目中遇到问题: 需要在iframe中,操作父窗口的tabs组件,来添加一个新窗口,操作一直会报错: jquery.easyui.min.js:4995 Uncaught TypeError: Ca ...
react17同源iframe父子页面相互调用方法
最近制作一个大数据展示页面,需要嵌套第三方html,并进行相应的交互. 如下图: 其中A页面需要与第三方iframe进行交互,同时iframe选择公司或者园区时会回显到树选择器中. 先上解决办法 1, ...
driver.get调用iframe中的页面_iframe特性全解读
前言在平时的开发中,或多或少会用到iframe,大部分时候我们只需要简单的使用iframe标签,设置个宽高即可,很少回去深究iframe的别的特性.比如这种用法: <iframe src='h ...
调用iframe中的函数
前言 360极速浏览器 13.0.2206.0 (正式版本) (32 位) 操作系统 Windows 10 OS Version 1909 (Build 18363.1379) JavaScript ...
获取父窗口元素或者获取iframe中的元素（相同域名下）
jquery方法在父窗口中获取iframe中的元素 //方法1 $("#iframe的ID").contents().find("iframe中的元素");/ ...