PostMessage is an important API for messaging and plays an important role in enabling cross-source communication between different pages. MessageChannel allows you to create a new MessageChannel and send data through its two MessagePort properties

1. The sending body must be the same as the receiving body

1.1 Home Page Sends messages to iframe

` ` ` JSX / / main page. The main HTML iframe. ContentWindow. PostMessage (' I am from the main page '. '*') //iframe.html window.onmessage=function(e){ console.log(e.data); } // The main ifame. ContentWindow is the window of iframeCopy the code

1.2 Iframe sends messages to the main page

```jsx
// iframe.html
window.parent.postMessage('I am from iframe page', '*')

// main.html
window.onmessage=function(e){
	console.log(e.data); // I am from iframe page
}
```
Copy the code

2. You can use MessageChannel to transfer messages exclusively

2.1 Home Page Sends messages to iframe

JSX // main.html var channel = new MessageChannel(); iframe.contentWindow.postMessage('I am from main page', '*', [channel.port1]); //iframe.html window.addEventListener('message', onMessage); function onMessage(e) { console.log(e.data); // I am from main page} // iframe onMessage receives e.posts as [channel.port1] ' 'Copy the code

2.2 Iframe sends messages to the home page

```jsx // iframe.html function onMessage(e) { console.log(e.data); // I am from main page e.ports[0].postMessage('I am from iframe page'); } // main.html var channel = new MessageChannel(); iframe.contentWindow.postMessage('I am from main page', '*', [channel.port1]); channel.port2.onmessage = function(e){ console.log(e.data); // I am from iframe page} // main.html prot1 and port2 can be interchanged, a bit like a phone, pick up a hair of message, the other end can receive message ' 'Copy the code

3. Complete examples

3.1 the main HTML

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width"> <title>main</title> </head> <body> <h1>Channel messaging demo</h1> <p class="output">My body</p> <iframe src="iframe.html" width='480' height='320'></iframe> </body> <script> var channel = new MessageChannel(); var output = document.querySelector('.output'); var iframe = document.querySelector('iframe'); // Wait for the iframe to load iframe.addEventListener("load", onLoad); Function onLoad() {// channel. Port1.onmessage = onmessage; channel.port2.onmessage = onMessage; // window. Onmessage = onmessage; // window. // Transfer port2 to the iframe // iframe.contentWindow.postMessage('I am from main page! ', '*', [channel.port2]); iframe.contentWindow.postMessage('I am from main page! ', '*', [channel.port1]); } // Handle messages received on port1 function onMessage(e) { console.log(e, 'main'); output.innerHTML = e.data + '---main--'; } </script> </html>Copy the code

3.2 the iframe. HTML

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width"> <title>iframe</title> </head> <body> <p class="output">iFrame body</p> </body> <script> var output = document.querySelector('.output'); window.addEventListener('message', onMessage); function onMessage(e) { console.log(e, 'iframe'); output.innerHTML = e.data; // Use the transfered port to post a message back to the main frame // window.parent.postMessage('I am from iframe page'); e.ports[0].postMessage('I am from iframe page'); } </script> </html>Copy the code