When we code, we often encounter the following cross-domain situations:
1. Nesting of iframes within the page and messaging with iframes
2. Transfer messages between pages and multiple pages
In response to these troublesome cross-domain issues, HTML5 has specially launched a new feature-postMessage (cross-document message transmission). When using postMessage, you need to pass in two parameters, data and originUrl. Data refers to the content that needs to be passed, but some browsers can only handle string parameters, so we generally serialize the data, that is, JSON.stringify(), and originUrl refers to the target url and the specified window.
Below is an example, I believe it will be easier for everyone to understand and write.
1. Nested iframe within the page
Parent page:
html:
<div id='parent'>hello word postMessage</div><iframe src=http://127.0.0.1:8082/index2.html id='child'></iframe>
js:
window.onload=function(){ window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')} window.addEventListener('message',function(e) { console.log(e) document.getElementById('parent').style.color=e.data})Subpage:
html:
<div id='button' onclick='changeColor();' style=color:yellow>Accept information</div>
js:
window.addEventListener('message',function(e){ console.log(e) let color = document.getElementById('button').style.color window.parent.postMessage(color,'http://127.0.0.1 :8081/index.html')});function changeColor(){ let buttonColor = document.getElementById('button').style.color buttonColor='#f00' window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')}The parent page passes messages to the iframe through the postMessage method, and the child page listens to the message method through window.addEventListener to obtain the value passed by the parent page. As shown in the figure below, data is the value passed by the parent page.
When the child page transmits messages to the parent page, it also passes the message through the postMessage method, instead of passing the value through window.parent.postMessage(data,url). The parent page also listens to the message event when getting the value.
2. Pass messages between multiple pages
Parent page:
html:
<div id='parent' onclick=postMessage()>hello word postMessage</div>
js:
let parent = document.getElementById('parent')function postMessage(){ let windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage') setTimeout(function(){ windowOpen .postMessage('postMessageData','http://127.0.0.1:8082/index2.html') },1000) }Subpage:
html:
<div id='button' onclick='changeColor();' style=color:#f00>Accept information</div>
js:
window.addEventListener('message',function(e){ console.log(e) });The parent page sends a message to the child page to open another page through window.open, and then passes the value to it. It should be noted that when using postMessage to transfer values, you need to use setTimeout to delay the delivery of the message, because the loading of the sub-page is not completed at once, which means that the listening event of the sub-page has not started yet, and the value is passed at this time. It cannot be received.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.