Example of implementing bidirectional messaging between parent and child pages in HTML iframe

Example of implementing bidirectional messaging between parent and child pages in HTML iframe

One day, the leader put forward a requirement to embed an iframe in the main page and send messages between the parent and child pages in both directions. Then I proposed a solution: postMessage

Knowledge theory preparation:

The postMessage method allows scripts from different sources to communicate asynchronously in a limited manner, and can achieve cross-text document, multi-window, and cross-domain message delivery.

grammar:

otherWindow.postMessage(message, targetOrigin, [transfer]);
  • otherWindow: A reference to another window, such as the contentWindow of an iframe, the window object returned by executing window.open, or named or numerically indexed window.frames.
  • message: data to be sent to other windows.
  • targetOrigin: Specifies which windows can receive message events. Its value can be the string "*" to indicate no restriction, or a URI.
  • transfer: is a string of Transferable objects that are passed along with the message. The ownership of these objects will be transferred to the recipient of the message, and the sender will no longer retain ownership.

When the postMessage method is called, a MessageEvent message is dispatched to the target window after all page scripts have been executed. The MessageEvent message has four properties that need to be noted:

  • type: indicates the type of the message
  • data: the first parameter of postMessage
  • origin: indicates the source of the window that calls the postMessage method
  • source: records the window object that calls the postMessage method

The operation process is as follows:

1. Prepare two pages

  • http://a.com/main.html Main page
  • http://b.com/iframepage.html Nested page

main.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage cross-domain communication main page</title>
</head>
<body>
    <h1>Main Page</h1>
    <iframe id="child" src="http://b.com/iframepage.html"></iframe>
    <div>
        <h2>Main page receiving message area</h2>
        <span id="message"></span>
    </div>
</body> 
</html>

iframepage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage cross-domain communication subpage</title>
</head>
<body>
    <h2>Subpages</h2>
    <div>
        <h3>Receive message area</h3>
        <span id="message"></span>
    </div>
</body>
</html>

2. Parent sends message to child

main.html

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

Notice:

The message must be sent after the page is loaded, otherwise an error will be reported because the iframe has not been loaded.

Failed to execute 'postMessage' on 'DOMWindow'

Subpage receives message:

iframepage.html

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

At this point, you can see that the page is printed in the iframe's subpage.

Received message from http://a.com: Main page message`

And the console prints the MessageEvent object.

3. The child sends a message to the parent

The child page replies to the parent page after receiving the message

iframepage.html

<script>
    window.addEventListener('message',function(event){
        console.log(event);
        document.getElementById('message').innerHTML = "Received" 
            + event.origin + "Message: " + event.data;
        top.postMessage("Subpage message received", 'http://a.com/main.html')
    }, false);
</script>

The parent page receives the message and displays:

window.addEventListener('message', function(event){
    document.getElementById('message').innerHTML = "Received" 
        + event.origin + "Message: " + event.data;
}, false);

4. Complete code

main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage cross-domain communication main page</title>
</head>
<body>
    <h1>Main Page</h1>
    <iframe id="child" src="http://b.com/iframepage.html"></iframe>
    <div>
        <h2>Main page receiving message area</h2>
        <span id="message"></span>
    </div>
</body> 
<script>
    window.onload = function(){
        document.getElementById('child')
         .contentWindow.postMessage("Main page message", 
            "http://b.com/iframepage.html")
    }
    window.addEventListener('message', function(event){
        document.getElementById('message').innerHTML = "Received"
         + event.origin + "Message: " + event.data;
    }, false);
</script>
</html>

iframepage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage cross-domain communication subpage</title>
</head>
<body>
    <h2>Subpages</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 = "Received" 
            + event.origin + "Message: " + event.data;
        top.postMessage("Subpage message received", 'http://a.com/main.html')
    }, false);
</script>
</html>

This is the end of this article about the implementation example of html parent-child page iframe two-way messaging. For more relevant html parent-child page iframe two-way messaging content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Introduction to using Unicode characters in web pages (&#,\u, etc.)

>>:  CSS achieves colorful and smart shadow effects

Recommend

Implement dynamic management and monitoring of docker containers based on spring-boot and docker-java [with complete source code download]

Introduction to Docker Docker is an open source a...

Open the app on the h5 side in vue (determine whether it is Android or Apple)

1. Development environment vue+vant 2. Computer s...

How to start source code debugging of tomcat in Idea and enter into tomcat for debugging

When using the idea development tool to debug cod...

Vue+swiper realizes timeline effect

This article shares the specific code of vue+swip...

Several ways to run Python programs in the Linux background

1. The first method is to use the unhup command d...

Detailed explanation of CSS sticky positioning position: sticky problem pit

Preface: position:sticky is a new attribute of CS...

A brief discussion on HTML doctype and encoding

DOCTYPE Doctype is used to tell the browser which...

Detailed explanation of desktop application using Vue3 and Electron

Table of contents Vue CLI builds a Vue project Vu...

Beginners learn some HTML tags (3)

Beginners who are exposed to HTML learn some HTML...

Key points for writing content of HTML web page META tags

The META tag is an auxiliary tag in the head area...

How to redraw Button as a circle in XAML

When using XAML layout, sometimes in order to make...

MySQL InnoDB MRR Optimization Guide

Preface MRR is the abbreviation of Multi-Range Re...

Let's talk in detail about the props attributes of components in Vue

Table of contents Question 1: How are props used ...

Detailed explanation of the usage of the alias command under Linux

1. Use of alias The alias command is used to set ...

A brief analysis of the relationship between various Tomcat logs and the segmentation of catalina.out files

The relationship between Tomcat logs A picture is...