相关文章推荐
奋斗的豆腐  ·  南方周末·  2 月前    · 
仗义的人字拖  ·  太上老君 - 知乎·  1 年前    · 
var url = "http://127.0.0.1/demo"; // 样式 var sFeatures = "dialogWidth:490px;dialogHeight:310px;scroll:no;status:no;"; // 参数 var arg= new Object(); arg.id = "1"; arg.name = "zhangsan"; // 打开子窗口 window.popupwin = window.open(url, vArguments, sFeatures); // 监听到子页面的message消息后,向子页面发送参数(子窗口打开后,会向当前窗口发送message消息,当前窗口监听到子窗口发送的消息后,向子窗口发消息) window.addEventListener('message', function (e) { window.popupwin.postMessage({type:'message', 'vArguments':vArguments}, '*');

子页面写法:

<script language="javascript" type="text/javascript">
        // 获取父页通过postMessage面传过来的参数,在DOM加载完成时执行
		jQuery(function(){
            // 向父页面发消息,触发父页面的监听事件,父页面就会给子页面发参数
            window.opener.postMessage({type:'start', 'message':'start'}, '*');
            // 监听父页面发送的message消息,获取参数
            console.log("get postMessage args...");
            window.addEventListener('message', function (e) {  // 监听 message 事件
                console.log("postMessage type:" + e.data.type);
                console.log("postMessage args:" + e.data.vArguments);
                window.parentArg = e.data.vArguments;
</script>

思路:在子窗口的DOM加载完成后,向父页面发消息,父页面监听到子页面发送的消息后,父页面给子页面发参数。然后子页面通过监听获得父页面发送的message消息,从而获取到父页面发送的参数

父页面写法: // 要打开的页面地址 var url = "http://127.0.0.1/demo"; // 样式 var sFeatures = "dialogWidth:490px;dialogHeight:310px;scroll:no;status:no;"; // 参数 var arg= new Object(); arg.id = "1"; arg.name = "zhangsan"; // 打开子窗口 w
接触到这个还是因为碰到一个两年前的项目,现在需要加新功能,这个是一个无vuex、无rout er 的题目资源中心的项目。所以就想到了两个 页面 在不使用接口传值的方式进行 postMessage 通信。
代码如下: // 打开 页面 并利用post方式传递 参数 function openNewPageWithPostData(postAddress,opentype,paramNames,paramValues) { var newWindow = window.open (postAddress,opentype); if (!newWindow) { return false; } var postDataHtml=”<html><head></head><body>”; postDataHtml = postDataHtml + “<form id=’postDataForm’ method=
postMessage 是 html5 引入的API, postMessage ()方法允许来自不同源的脚本采用异步方式进行 有效 的通信,可以 实现 跨文本文档、多窗口、跨域消息传递,多用于窗口间数据通信,这也使它成为跨域通信的一种 有效 的解决方案。 一、Window postMessage () 方法介绍 postMessage () 方法用于安全地 实现 跨源通信。(只有同源脚本才能相互通信,window. postMessage () 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。) 1、语法:o
postMessage 可以解决跨域的传值问题,一般可以认为是父 页面 向子 页面 传递消息。 发送数据(父 页面 ): oth er Window. postMessage (message, targetOrigin, [transf er ]); oth er Window:其他窗口的一个引用,可以是 window.open (‘xxx’)、 window.open er 等等(目前只用过这两种...
最近需求中出现一个iframe 在点击完成之后 子 iframe 需要给 父iframe 传递一个 参数 在父iframe中这么接受 在created和 mounted 都可以 window.addEventListen er ('message', this.handleMessage,'事件名') 事件这么写 handleMessage(e) { if (e.data.status === 'ok') { this.f