[JavaScript]父子窗口间参数传递
2024-10-18 22:16:37
概述
当页面嵌入一个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对象直接调用其方法。
最新文章
- 从零开始学 Java - Spring MVC 统一异常处理
- iOS开发之Objective-c的MD5/SHA1加密算法的实现
- SQL_SERVER_2008升级SQL_SERVER_2008_R2办法 (一、升级;二、重新xie载安装)
- Wireshark抓包分析HTTPS与HTTP报文的差异
- centos6.5安装配置zabbix3.0.3
- 在Azure HDInsight HBase集群中使用Thrift接口
- css控制大小写
- shell color
- Java学习笔记之I/O
- (转)Amoeba for MySQL 非常好用的mysql集群软件
- JS函数和对象(一)
- CSS黄金三段--消除边框的影响
- JAVA线程概念
- Tomcat7源码环境搭建
- 「FHQ Treap」学习笔记
- Error configuring application listener of class org.springframework.web.cont
- Xcode - 因为证书问题经常报的那些错
- vue项目sql图片动态路径引用问题
- MATLAB 图像归一化
- android 开发 使用自定义布局实现标题栏复用(标题栏内容自定义:使用代码实现和xml布局自定义属性2种办法实现)
热门文章
- weed3-2.2.细讲插入和更新
- 从零开始的vue学习笔记(一)
- git clone 仓库的部分代码
- Python——高阶函数概念(Higher-order function)
- Create a Report in Visual Studio 在Visual Studio中创建报表
- JVM学习分享-练习题
- QGIS 3.4 3.6 另存栅格图层到GeoPackage出现覆盖问题 解决方案
- 关于useGeneratedKeys的使用
- s3c2440裸机-异常中断(一. 异常、中断的原理与流程)
- unittest---unittest的几种执行方法