使用iframe嵌套另一个页面,这个页面大部分情况下不会部署在父页面相同的域名下,但是又需要父子页面进行数据交互,那么我们该怎么处理呢?话不多说直接上代码。
一,子页面向父页面传值
1,iframe打开的子页面加入一下代码,向父页面进行通信
$(function () {
function iframeDoAction(){
var params = {
type: "redirect",
url: "${basePath}login/toLogin.htm"
}
console.log(params);
window.parent.postMessage(params, "*");
}
iframeDoAction();
})
2,在父页面进行消息接收
function testPostMsg() {
window.addEventListener("message", e => {
const { type, url } = e.data;
if (!type || !url) return;
window.location.replace(url);
});
}
二,父页面向子页面传值
1,父页面代码
window.onload = function(){
console.log(document.getElementById('iframeContainer').contentWindow.param)
}
2,子页面代码
var param: {"type":2, id: 1 };