[JavaScript]父子窗口间参数传递
概述
当页面嵌入一个iframe，或者打开一个子窗口。这个时候如果父窗口需要与子窗口之间通讯，如果直接用DOM访问对方窗口window，会受到跨于安全机制影响。
javascript提供一个方法，可以解决这个问题，window.postMessage()；
示例
1.与iframe通讯
主页面：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe id="iframe_1" src="http://192.168.5.136:10013/tmp_75.html"></iframe>
<!-- <iframe id="iframe_1" src="./temp_1263.html"></iframe> -->
<script type="text/javascript">
var iframe_1 = document.getElementById("iframe_1");
iframe_1.addEventListener("load", function(e){
e.target.contentWindow.postMessage({"foo": 1}, "*");
}, false); window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
console.log(event);
} </script>
</body>
</html>
子页面：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
console.log(event);
window.parent.postMessage({"bar": 1}, "*");
}
</script>
</body>
</html>
双方页面监听"message"事件，父页面等待子页面加载完毕后调用子窗口的window.postMessage发送信息，子窗口收到信息后触发"message"回调函数，回调函数中往父窗口的window.postMessage发送信息，父窗口收到消息后触发"message"回调函数。
2.与子窗口通讯
跟iframe不同之处在于，可能是出于某种安全机制的设计，通过window.open返回的window对象无法让父窗口监听该window对象的事件。
这就意味着父窗口无法通过事件去得知子窗口何时加载完毕，并且在何时适合调用window.postMessage发送信息。
有一种解决办法是让子窗口通过window.opener对象，调用父窗口的方法来到通知它子窗口已经就绪。
主页面：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a id="a_1">open</a>
<script type="text/javascript">
var a_1 = document.getElementById("a_1");
var win_1;
a_1.addEventListener("click", function(e){
win_1 = window.open('./tmp_77.html','_blank','width=200,height=100');
}, false); window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
console.log(event);
} function subWinReady(){
win_1.postMessage({"foo": 1}, "*");
}
</script>
</body>
</html>
子页面：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
window.opener.postMessage({"bar": 1}, "*");
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
console.log(event);
}
//调用父页面方法
window.opener.subWinReady();
</script>
</body>
</html>
注意：这种方式在跨域下是无效的，因为跨域下双方页面不能通过获取对方window对象直接调用其方法。
[JavaScript]父子窗口间参数传递的更多相关文章
- JS方法在iframe父子窗口间的调用
本文向大家简单介绍一下iframe父子窗口间JS方法调用,JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用,希望本文介绍对你有所帮助. if ...
- Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用
Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用 Ext.ux.IFrame Extjs官方提供的一个组件,可以很方便的使用. 这样就完成了一个简单的IFrame的使用,通过E ...
- WM_PAINT(父子窗口间)
WM_PAINT(父子窗口间) 窗口句柄(HWND)都是由操作系统内核管理的,系统内部有一个z-order序列,记录着当前从屏幕底部(假象的从屏幕到眼睛的方向),到屏幕最高层的一个窗口句柄的排序,这个 ...
- vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue2.0父子组件间事件派发机制
从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...
- 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...
- 使用 SetParent 制作父子窗口的时候，如何设置子窗口的窗口样式以避免抢走父窗口的焦点
原文:使用 SetParent 制作父子窗口的时候,如何设置子窗口的窗口样式以避免抢走父窗口的焦点 制作传统 Win32 程序以及 Windows Forms 程序的时候,一个用户看起来独立的窗口本就 ...
- Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 微信小程序的入门
1.申请账号 官网:https://mp.weixin.qq.com/ 2.开发工具 为了帮助开发者简单和高效地开发和调试微信小程序,推出了小程序开发者工具,集成了公众号网页调试和 ...
- Java生鲜电商平台-服务化后的互联网架构实战(针对生鲜电商小程序或者APP)
Java生鲜电商平台-服务化后的互联网架构实战(针对生鲜电商小程序或者APP) “微服务架构”的话题非常之火,很多朋友都在小窗我,说怎么做服务化?解答“怎么做”之前,先得了解“为什么做”. 画外音:做 ...
- delphi使用Chilkat 组件和库从SFTP下载文件
官网地址:https://www.example-code.com/delphiDll/default.asp 实例代码:(不包括全局解锁) 密码生成器:https://www.cnblogs.co ...
- Virtual Box复制虚拟机
用惯了VM换BOX还是有点不大一样的,比如复制 我用了2个网卡,所以看起来麻烦了一次 注释了UUID 应该有更好的办法来操作,下面的看起来有点啰嗦,先凑合着这样弄... 1.关机 2.复制 3.改名称 ...
- YourSQLDba的共享路径备份遭遇重启问题
如果YourSQLDba设置过共享路径备份(具体参考博客YourSQLDba设置共享路径备份),有时候服务器重启后,备份就会出错,具体错误信息类似如下所示: Date 2019/9/25 ...
- Docker-compose安装和应用
安装 1.为什么要使用docker-compose? 使用 Docker Compose 可以轻松.高效的管理容器,它是一个用于定义和运行多容器 Docker 的应用程序工具 2.其他前置条件需要 ...
- java之等待唤醒机制（线程之间的通信）
线程间通信 概念:多个线程在处理同一个资源,但是处理的动作(线程的任务)却不相同.比如:线程A用来生成包子的,线程B用来吃包子的,包子可以理解为同一资源,线程A与线程B处理的动作,一个是生产,一个是消 ...
- TopCoder12808 「SRM594Medium」FoxAndGo3 二分图最大独立集
问题描述 一个 \(N \times N\) 围棋棋盘,任意两个白子不相邻,你要加入若干个黑子并提出白子,最大化空格数目. submit 题解 显然最终棋盘的局面不能够一个白子和它周围的空格都是空的, ...
- ArrayList和LinkedList介绍
java.util.ArrayList集合的数据存储结构是数组,且是多线程,元素增删慢,查找快, 由于日常使用开发大多数为查询数据,遍历数据,所以ArrayList是最常用的集合.上一节已写了. ja ...
- go语言之range
Go 语言范围(Range) Go 语言中 range 关键字用于 for 循环中迭代数组(array).切片(slice).通道(channel)或集合(map)的元素.在数组和切片中它返回元素的索 ...