1, the postMessage

The postMessage approach allows scripts from different sources to communicate asynchronously in a limited manner, enabling cross-text file, multi-window, cross-domain messaging. Grammar:

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

  • OtherWindow: A reference to another window, such as the contentWindow of iframe, the window object returned by executing window.open, or the window.frames of a named or numeric index.
  • Message: Data to be sent to another window.
  • TargetOrigin: Specifies which Windows can receive message events. The value can be the string “*” for unrestricted or a URI.
  • Transfer: A string of Transferable objects that are passed along with Message. Ownership of these objects is transferred to the receiver of the message, and the sender no longer retains ownership.

When the postMessage method is called, a MessageEvent message will be sent to the target window after all page scripts are executed. The MessageEvent message has four attributes to note: Type: indicates the type of the message data: Origin: records the window object from which the postMessage method was called.

2. Build a framework

  • A.com/main.html home page
  • B.com/iframepage…. Nested page

main.html

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe+postMessage Cross-domain communication home page </title> </head> <body> <h1> Home page </h1> <iframe ID ="child" src="http://b.com/iframepage.html"></iframe> <div> <h2> The home page area for receiving messages </h2> <span id="message"></span>
    </div>
</body> 
</html>Copy the code

iframepage.html

<! DOCTYPE html> <html> <head> <meta charset="utf-8"< <title>iframe+postMessage Cross domain communication sub-page </title> </head> <body> < H2 > sub-page </h2> <div> < H3 > Receive message area </h3> <span ID ="message"></span>
    </div>
</body>
</html>Copy the code

2. The parent sends a message to the child

main.html

<script>
    window.onload = function(){
        document.getElementById('child')
         .contentWindow.postMessage("Home page message"."http://b.com/iframepage.html")
    }
</script>Copy the code

Note: the message must be sent after the page has finished loading, otherwise an error will be reported because the iframe has not finished loading.

Failed to execute 'postMessage' on 'DOMWindow'Copy the code

The child page receives the message: iframepage.html

<script>
    window.addEventListener('message'.function(event){
        console.log(event);
        document.getElementById('message').innerHTML = "Receive" 
            + event.origin + "News:" + event.data;
    }, false);
</script>Copy the code

At this point, you can see that in the page, the iframe child page is printed

Received http://a.com message: Home page messageCopy the code



And the console prints the MessageEvent object.



3. Children send messages to their parents

The child page responds to the parent page iframepage.html after receiving the message

<script>
    window.addEventListener('message'.function(event){
        console.log(event);
        document.getElementById('message').innerHTML = "Receive" 
            + event.origin + "News:" + event.data;
        top.postMessage("Child page message received".'http://a.com/main.html')},false);
</script>Copy the code

The parent page receives the message and displays:

window.addEventListener('message'.function(event){
    document.getElementById('message').innerHTML = "Receive" 
        + event.origin + "News:" + event.data;
}, false);Copy the code



4. Complete code

main.html

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe+postMessage Cross-domain communication home page </title> </head> <body> <h1> Home page </h1> <iframe ID ="child" src="http://b.com/iframepage.html"></iframe> <div> <h2> The home page area for receiving messages </h2> <span id="message"></span>
    </div>
</body> 
<script>
    window.onload = function(){
        document.getElementById('child')
         .contentWindow.postMessage("Home page message"."http://b.com/iframepage.html")
    }
    window.addEventListener('message'.function(event){
        document.getElementById('message').innerHTML = "Receive"
         + event.origin + "News:" + event.data;
    }, false);
</script>
</html>Copy the code

iframepage.html

<! DOCTYPE html> <html> <head> <meta charset="utf-8"< <title>iframe+postMessage Cross domain communication sub-page </title> </head> <body> < H2 > sub-page </h2> <div> < H3 > Receive message area </h3> <span ID ="message"></span>
    </div>
</body>
<script>
    window.addEventListener('message'.function(event){
        if(window.parent ! == event.source){return}
        console.log(event);
        document.getElementById('message').innerHTML = "Receive" 
            + event.origin + "News:" + event.data;
        top.postMessage("Child page message received".'http://a.com/main.html')},false);
</script>
</html>Copy the code

——————— 

Author: tang_yi_

Source: CSDN

Original: https://blog.csdn.net/tang_yi_/article/details/79401280

Copyright notice: This article is the blogger’s original article, reprint please attach the blog link!