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