1. iframe points to xiebiji.com

2. for="message">Send a message to the parent window:  
3. "text" name="message" value="dad" id="message"/> 
4. "submit"/>

5. "test">No information yet.

   The following is the Javascript code (sending data) in test.html: var win = document.getElementById("iframe" ).contentWindow;document.querySelector('form').onsubmit=function(e){
6. win.postMessage(document.getElementById("message").value,"*");
7. if (e.preventDefault)
8. e.preventDefault();
9. e.returnValue = false;
10. } 

1. win.postMessage(document.getElementById("message").value,"*");

1. var parentwin = window.parent;window.onmessage=function(e){ 
2. document.getElementById("test").innerHTML = e.origin "say:" e. data;
3. parentwin.postMessage('HI! You sent me "' e.data '". ',"*");};

It’s very simple, I believe you will understand it at a glance. e.data contains the transmitted data, and e.origin refers to the source domain.

Then iframe.html also sends response data to test.html, and test.html receives the data. If the code is similar, I won’t post the code.

2. Ajax cross-domain request

Based on the above cross-domain communication, just put the Ajax code in the onmessage processing function in iframe.html, Send the request to test.html using the data passed by postMessage as a parameter, and then pass the returned data to test.html using postMessage. In this way, cross-domain Ajax requests are implemented. It's actually a very simple thing.

Post a sample code, but it has nothing to do with the above code.

Then give an unsightly demo.

If you are interested in the code request, please use the developer tools to check it out. "zebo man" is read from the database, and "my msg" is the parameter of the Ajax request sent by sendAndReceive.html to test.php. , passed back to sendAndReceive.html through test.php and iframeforAjax.html.

3. Tips

You need to get the contentWindow of the iframe to call postMessage.

postMessage must be called after the iframe is loaded to run normally. (This took me a long time)