Shulou(Shulou.com)06/03 Report--

This article focuses on "the use of postMessage in javascript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "the use of postMessage in javascript".

PostMessage in javascript

The parent page, the child page, the two pages are not in the same domain, and the dialogue between them uses postMessage. The following are collectively referred to as pages F and C for convenience.

The click event of the C page button sends a message to the F page. The F page receives the message. The C page executes the logic LC,LC. The F page sends a message to the C page. The F page receives the message. The F page executes the logic LF. In a word, pages F and C communicate with each other.

It can be considered that

Similar to parent-child component communication in react.

C page js code: var btnObj = document.getElementById ('buttons'); btnObj.onclick = function () {var defaultAdData = {type:'advert', gameData: {adId:' 123'}}; window.parent.postMessage (JSON.stringify (defaultAdData),'*') / * I am the error code: var receiveMessage = function (event) {var datas = JSON.parse (event.data); if (datas.type = "adGivePrize" & & datas.givePrize) {alert ('click');}} window.addEventListener ("message", receiveMessage, false) * /} / * I am the correct code: var receiveMessage = function (event) {var datas = JSON.parse (event.data); if (datas.type = "adGivePrize" & & datas.givePrize) {alert ('click');}} window.addEventListener ("message", receiveMessage, false); * / F page js Code: var receiveMessage = function (event) {var datas = JSON.parse (event.data) If (datas.type = = "advert") {var postIframeData = {type:'adGivePrize', givePrize:true}; / / iframe sends messages ~ window.frames [0] .postMessage (JSON.stringify (postIframeData),'*');}} window.addEventListener ("message", receiveMessage, false)

In summary, this method provides communication between two unrelated pages, so that external projects or embedded iframe can communicate with each other.

At this point, I believe you have a deeper understanding of "the use of postMessage in javascript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.