1. What is postMessage?

PostMessage is an API introduced by HTML5. The postMessage() method allows scripts from different sources to communicate effectively in an asynchronous manner, enabling cross-text document, multi-window, and cross-domain messaging. It is mainly used for inter-window data communication, which makes it an effective solution for cross-domain communication.

2. PostMessage API is introduced

Sending data:

otherWindow.postMessage(message, targetOrigin, [transfer]);
Copy the code

Related objects and parameters are described as follows:

  • OtherWindow: A reference to another window, such as the contentWindow property of iframe, the window object returned by executing window.open, or the window.frames named or numeric index.
  • TargetOrigin: Specifies which Windows can receive message events via the origin property of the window. The value can be a string “*” (for unrestricted) or a URI.
  • Message: Data to be sent to another window. It will be serialized by a structured cloning algorithm. This means you can safely pass data objects to the target window without having to serialize them yourself.

Receiving data:

window.addEventListener("message", receiveMessage); function receiveMessage(event) { var origin = event.origin if (origin ! == "http://example.org:8080") return; / /... }Copy the code

The screenshot of the event object is as follows:

3. How PostMessage works

PostMessage is a new cross-source COMMUNICATION API introduced in HTML5 that allows you to have two-way communication between the home page and any frame class page or window.open page. Its general operation process is shown as follows:

4. Give examples

Child pages pass messages to parent pages

The parent page <! -- index. HTML - > < iframe SRC = "http://127.0.0.1:5500/frame1.html" frameborder = "1" > < iframe > < iframe SRC = "http://127.0.0.1:5500/frame2.html" frameborder = "1" > < iframe > < script > Window. The addEventListener (' message ', function (e) {the console. The log (e.d ata)}, false) < / script >Copy the code
Child pages <! -- frame1.html --> <h1>iframe1 Page </h1> <script> window.top.postMessage('message from iframe1'); </script>Copy the code

The parent page passes messages to the child pages

The parent page <! -- index. HTML - > < iframe SRC = "http://127.0.0.1:5500/frame1.html" frameborder = "1" > < iframe > < iframe SRC = "http://127.0.0.1:5500/frame2.html" frameborder = "1" > < iframe > < script > window. The onload = function () {var frame1 = window.frames[0]; Frame1. PostMessage (the 'message from parentwindow', 'http://127.0.0.1:5500/frame1.html'); } </script>Copy the code
Child pages <! -- frame1.html --> <h1>iframe1 page</h1> <script> window.addEventListener('message',function(e){ console.log(e.data) },false) </script>Copy the code

Note: Window in window.postMessage refers to the window from which you want to send a cross-domain message (the target window you need to communicate to), not the window of its own window

  • The window in window.postMessage refers to the window you want to send a cross-domain message to (the target window you need to communicate to), not the window of its own window
    • Parent page: The parent page sends cross-domain information to the child page. Window is the window of the child page pointed to by the embedded iframe in the parent page, that is, iframe.contentWindow
    • Child page: the child page sends cross-domain information to the parent page. Window is the parent page’s window. In this case, because the child page is embedded in the parent page, for the child page, window is top or parent
  • The message must be sent after the sub-page in the iframe is loaded. Otherwise, the sub-page cannot receive the message
  • When listening for message events, you need to check the origin of the message

5. The true meaning of postMessage

If only to solve ajax cross-domain, in fact, there are many solutions, such as CORS, JSONP, etc., is enough, postMessage value should be able to let two different web pages establish linkage.

Leaving postMessage aside, it’s not feasible to communicate directly with a site, and browser security policies limit what you can do. In this case, all you have to communicate is the web site’s server interface, with cross-domain support for information exchange. This approach is robust and has obvious drawbacks:

  • Communication with the server of the other party is required. Cross-domain requires additional Settings to support, which requires communication and negotiation with the other party.
  • If you need to extract a value from the other side’s web page or notify the other side of an interaction change, there is no alternative to ajax polling, with the server delivering the information for you.

6. PostMessage compatibility?

Internet Explorer 8+ is supported, but Internet Explorer 6 and Internet Explorer 7 are not.