父页面与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 => {})
然后就可以实现互动了