父页面与iframe、父页面与子页面的通讯
作者：互联网
父页面与iframe间的通讯
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
</head>
<body>
<p>this is parent window</p>
<input type="text" id="parentMsg">
<button id="sendParentMsg">发送信息到iframe</button>
<div class="contents">
<p>这里会展示收到的信息</p>
</div>
<iframe src="child.html" frameborder="2" id="childIframe" height="500" width="800"></iframe>
<script>
window.onload =function () {
{
let a = 1;
}
var b= {x:2,y:3};
console.log(a);
console.log(b.x);
alert(b.y);
}
let origin, win;
// 为父页面绑定message事件，接受来自iframe发送的消息
window.addEventListener('message', event => {
console.log(event.origin);
console.log(event.data);
console.log(event.source);
document.querySelector('.contents').innerHTML += `<p> child：${event.data}</p>`;
});
// win可以是iframe的引用，也可以是通过通过父页面打开的子页面的window引用，比如子页面是通过window.open打开的，那么win可以是win = window.open(url, '_blank'),这样便可以实现两个tab页之间的通信
win = document.querySelector('#childIframe').contentWindow;
document.querySelector('#sendParentMsg').addEventListener('click', () => {
let parentMsg = document.querySelector('#parentMsg').value.trim();
if (parentMsg) {
win.postMessage(parentMsg, '*');
document.querySelector('#parentMsg').value = '';
}
})
</script>
</body>
</html>child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>child</title>
</head>
<body>
<p>this is iframe page</p>
<label for="subpageInput"> 请输入信息</label>
<input type="text" id="subpageInput">
<button class="sendSubpage">发送信息到父页面</button>
<div class="contents">
</div>
</body>
<script>
let parentWin, parentOrigin;
// 监听来自父页面的消息
window.addEventListener('message', event => {
parentOrigin = event.origin; // 获取发送方页面的origin，通过判断此属性来识别发送方的身份
parentWin = event.source; // 获取发送发window对象的引用，可以通过这个对象调用postMessage方法实现父子页面互相通信。
document.querySelector('.contents').innerHTML += `<p>parent：${event.data}</p>`;
});
document.querySelector('.sendSubpage').addEventListener('click', () => {
let subMessage = document.querySelector('#subpageInput').value.trim();
console.log(typeof subMessage);
if (subMessage) {
// submessage为要发送的信息，'*'为指定某个域接受信息
parentWin.postMessage(subMessage, '*');
document.querySelector('#subpageInput').value = '';
}
})
</script>
</html>效果页面
父页面与新打开页面的互动
parent_.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
</head>
<body>
<p>this is parent window</p>
<input type="text" id="parentMsg">
<button id="sendParentMsg">发送信息到iframe</button>
<div class="contents">
<p>这里会展示收到的信息</p>
</div>
<script>
let origin, win;
window.onload =function () {
win = window.open("child.html","_blank")
}
// 为父页面绑定message事件，接受来自iframe发送的消息
window.addEventListener('message', event => {
console.log(event.origin);
console.log(event.data);
console.log(event.source);
document.querySelector('.contents').innerHTML += `<p> child：${event.data}</p>`;
});
// win可以是iframe的引用，也可以是通过通过父页面打开的子页面的window引用，比如子页面是通过window.open打开的，那么win可以是win = window.open(url, '_blank'),这样便可以实现两个tab页之间的通信
// win = document.querySelector('#childIframe').contentWindow;
document.querySelector('#sendParentMsg').addEventListener('click', () => {
let parentMsg = document.querySelector('#parentMsg').value.trim();
if (parentMsg) {
win.postMessage(parentMsg, '*');
document.querySelector('#parentMsg').value = '';
}
})
</script>
</body>
</html>child.html没有发生变化，这是两个tab页面就可以实现互动了
如图所示
实现过程通过指定的html对象引用 win或者parentWin的postMessage方法来发送消息，对应的html对象中添加message的监听器，用来接收外部发送的消息。
window.addEventListener('message', event => {})
然后就可以实现互动了
标签：querySelector,win,window,iframe,与子,document,event,页面 来源： https://blog.csdn.net/u014104653/article/details/122354936