需求:子级页面通过inform嵌入父级页面,父子级页面不同域,实现父子页面传参
<div style="position: absolute;top:0px;left:0px;width: 100%;height: 100vh;overflow-y:hidden">
<button id="an" type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
<iframe id="myIframe" src="..." style="width: 100%;height: 100%;border:0px;"></iframe>
</div>
解决方案:
1. postMessage
1.1 父级向子级页面传参:
父级:
$('#an').click(function(){
callFuncInThingJS('updateData', 4);
});
function callFuncInThingJS(funcName, data) {
console.log("给子页面传参开始---------");
console.log("funcName:"+funcName+",data:"+data);
var iframe = $('#myIframe')[0];
console.log("iframe:"+iframe);
var message = {
'funcName': funcName,// 所要调用ThingJS页面里的函数名
'param': data
}
iframe.contentWindow.postMessage(message, '*');
console.log("给子页面传参结束--------");
}
子级:
window.addEventListener('message', function(e) {
console.log("监听主页面数据------开始");
console.log("e.data:"+JSON.stringify(e.data));
var data = e.data;
var funcName = data.funcName;
var param = data.param;
// 调用 ThingJS 页面方法
window[funcName](param);
console.log("监听主页面数据------结束");
});
1.2 子级向父级传参
子级:
var message = {
'funcName': funcName, // 所要调用父页面里的函数名
'param': data
}
// 向父窗体(用户主页面)发送消息
// 第一个参数是具体的信息内容,
// 第二个参数是接收消息的窗口的源(origin),即"协议 + 域名 + 端口"。也可以设为*,表示不限制域名,向所有窗口发送
window.parent.postMessage(message, '*');
父级:
// 接收ThingJS页面传送的数据
window.addEventListener('message', function (e) {
console.log("监听ThingJS页面-----开始");
console.log("e.data:"+JSON.stringify(e.data));
var data = e.data;
var funcName = data.funcName;
var param = data.param;
console.log("funcName:"+funcName);
//if (window[funcName]) window[funcName](param);
if(funcName==='upDataInfo'){
upDataInfo(param);
}
console.log("监听ThingJS页面------结束");
});
2. 使用location(location.hash/location.href)实现传参
2.1 父级向子级传参
父级页面(location.hash):
<iframe id="myIframe" src="https:...#index=3" style="width: 100%;height: 100%;border:0px;"></iframe>
子级页面:
var currentHash = location.hash;
2.2 子级向父级传参
需要建一个中间页面,中间页面需要与父级页面同域,中间页面嵌入子级页面。