同域下跨文档通信iframe和window.open

1、iframe标签可以嵌套另一个标签，并且可以通过js去访问被包含的页面的window对象，从而操作该页面下documentElement，如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>window.onload= function() {var oBtn = document.getElementById('btn');var oMyIframe = document.getElementById('myframe');oBtn.onclick= function() {//如果我们要操作一个iframe里面的dom元素，首先要获取到iframe引入的页面的window//oMyIframe.contentWindow -> 被iframe包含的页面的window对象//alert(oMyIframe.contentWindow);
oMyIframe.contentWindow.document.body.style.background= 'red';}}</script>
</head><body><input type="button" value="点击我，改变2.iframe.html的背景色" id="btn" /><iframe id="myframe" src="2.iframe.html"></iframe>
</body>
</html>

通过contentWindow来找到被包含页面的window对象，从而继续其他操作。那么被包含页面怎么找到他的父级页面呢？

一个页面可以通过iframe来嵌套另外一个页面，被包含的页面又可以继续通过iframe标签也继续嵌套其他页面，这样就是一种层级关系

我们知道window指的是当前页面窗口，那么parent指的是父级窗口，top指的是顶级窗口，三者可能会表示相同窗口。例如：

parent.document.body.style.background = 'green';

top.document.body.style.background = 'green';

2、window.open

通过window.open方法可以打开一个新窗口，并且返回的是被打开窗口的window对象。

例如：

newWindow = window.open('4.window.open.html', '_blank');

相反，window.opener可以访问到通过window.open方法打开当前页面的窗口window，例如：

window.opener.document.body.style.background = 'green';

注意：iframe和window.open都只能解决同域下的跨文档通信！如果跨域，那么只能访问到window对象，window对象下的属性和方法豆浆禁止访问。

转载于:https://www.cnblogs.com/toodeep/p/4768171.html

同域下跨文档通信iframe和window.open相关推荐

window.postMessage跨文档通信
window.postMessage 1.浏览器兼容情况:IE8+.chrome.firefox等较新浏览器都至此. 2.使用方法: a.otherWindow.postMessage( messag ...
JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.wrox.com域中的一个页面与一个位于内嵌框架中的p2p.w ...
HTML5 跨文档消息传输
对窗口对象的message事件进行监听 window.addEventListener("message", function(event) {//处理程序代码 },false); ...
多模态大模型时代下的文档图像智能分析与处理
多模态大模型时代下的文档图像智能分析与处理 0. 前言 1. 人工智能发展历程 1.1 传统机器学习 1.2 深度学习 1.3 多模态大模型时代 2. CCIG 文档图像智能分析与处理论坛 2.1 文 ...
java 获取 word 窗体域_办公小技巧：巧用窗体域控制Word文档修改区
原标题:办公小技巧:巧用窗体域控制Word文档修改区有时我们发给别人的Word文档,仅仅需要对方修改其中的一小部分,比如房屋出租合同中的房屋承租人信息,采购清单中的数量信息等.这类文档中的其他信息 ...
大模型时代下智能文档处理核心技术大揭秘
强烈推荐一个大神的人工智能的教程:http://www.captainai.net/zhanghan 大模型时代下智能文档处理核心技术大揭秘前言一张图全览文档图像分析与预处理图像预处理的整体 ...
金税接口Sap下传文档
* Program ID/Name: ZSDE1001 Date written: 20080516 * Author's name: xh Last update: * Program title: ...
教你用java统计目录下所有文档的词频
本文是统计目录下所有文档的词频top10,非单个文档,包含中文和英文. 直接上代码: 1 package com.huawei.wordcount; 2 3 import java.io.Buffer ...
今晚直播 | 微软亚洲研究院徐毅恒：预训练时代下的文档智能
「AI Drive」是由 PaperWeekly 和 biendata 共同发起的学术直播间,旨在帮助更多的青年学者宣传其最新科研成果.我们一直认为,单向地输出知识并不是一个最好的方式,而有效地反馈和 ...

同域下跨文档通信iframe和window.open

同域下跨文档通信iframe和window.open相关推荐

最新文章

热门文章