Troubleshooting problems with Window.postMessage()

Question

Troubleshooting problems with Window.postMessage()

When attempting to fetch data from different domains, I am facing an issue. However, if I run the code on the same server, everything works perfectly fine and I am able to retrieve the message.

index.html:

<head>
    <title>Test 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
        function popupResize() {
            var popup = window.open('popup.html', '', 'resizable=yes,scrollbars=yes,width=500,height=500');
            // var popup = window.open('https://foo/index.html', '', 'resizable=yes,scrollbars=yes,width=500,height=500');
            window.addEventListener(
                'message',
                function(event) {
                    console.log(event.data);
                },
                false
            );
        }
    </script>
</head>
<body>
    <a href='javascript:void(0)' onClick="popupResize(); return false;">Go!</a>
</body>

popup.html:

    <head>
    <title>Game history details</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script>
        function postSize() {
            var h = 100;
            var w = 200;
            opener.postMessage([h, w], '*');
        }
    </script>
</head>
<body onload="postSize();">
    test 1
</body>

Is there a way to make it work when using different servers?

javascript dom-events postmessage

Answer 1

Answer №1

Solution for Issue 1

popup.addEventListener(

To properly handle the event, you should listen on the original window instead of the popup. The popup is where the message originates, not where it should be received.

You can use window.addEventListener( or simply addEventListener(.

Solution for Issue 2

{h, w}

It's important to note that ES6 shorthand property names are not compatible with IE, Opera, Safari, or Android Mobile browsers. It's recommended to avoid using them.

Solution for Issue 3

parent.postMessage({h, w}, '*');

You are actually sending a message to the opening window, not the parent frame. Since there is no actual parent frame (and parent refers back to window), the correct syntax would be:

 opener.postMessage({h: h, w: w}, '*');

Solution for Issue 4

<script type="text/javascript">
   var popup = window.open('popup.html', '', 'resizable=yes,scrollbars=yes,width=500,height=500');

Your script lacks permission to open a new window except in response to a user event. To fix this, move the code into a function and call it from events like a click event.

If tested on the same server, there wouldn't be any issues - messages will be received successfully.

The root cause of the problem lies in issues 1 and 3. By binding an event handler to the popup and posting a message from the popup to itself (parent === window), the behavior is flawed.

A working code snippet (although not best practice) includes:

`http://localhost:7007/index.html`

<!DOCTYPE html>
<html>
<script>
addEventListener("message", function (event) {
    document.body.appendChild(document.createTextNode(event.data));
});
function pop() {
    window.open("http://127.0.0.1:7007/popup.html");
}
</script>
<input type="button" onclick="pop()">

`http://127.0.0.1:7007/popup.html`

<!DOCTYPE html>
<html>
<script>
opener.postMessage([123, 456], '*');
</script>
<h1>popup</h1>

Answer 2

Solution for Issue 1

popup.addEventListener(

To properly handle the event, you should listen on the original window instead of the popup. The popup is where the message originates, not where it should be received.

You can use window.addEventListener( or simply addEventListener(.

Solution for Issue 2

{h, w}

It's important to note that ES6 shorthand property names are not compatible with IE, Opera, Safari, or Android Mobile browsers. It's recommended to avoid using them.

Solution for Issue 3

parent.postMessage({h, w}, '*');

You are actually sending a message to the opening window, not the parent frame. Since there is no actual parent frame (and parent refers back to window), the correct syntax would be:

 opener.postMessage({h: h, w: w}, '*');

Solution for Issue 4

<script type="text/javascript">
   var popup = window.open('popup.html', '', 'resizable=yes,scrollbars=yes,width=500,height=500');

Your script lacks permission to open a new window except in response to a user event. To fix this, move the code into a function and call it from events like a click event.

If tested on the same server, there wouldn't be any issues - messages will be received successfully.

The root cause of the problem lies in issues 1 and 3. By binding an event handler to the popup and posting a message from the popup to itself (parent === window), the behavior is flawed.

A working code snippet (although not best practice) includes:

`http://localhost:7007/index.html`

<!DOCTYPE html>
<html>
<script>
addEventListener("message", function (event) {
    document.body.appendChild(document.createTextNode(event.data));
});
function pop() {
    window.open("http://127.0.0.1:7007/popup.html");
}
</script>
<input type="button" onclick="pop()">

`http://127.0.0.1:7007/popup.html`

<!DOCTYPE html>
<html>
<script>
opener.postMessage([123, 456], '*');
</script>
<h1>popup</h1>

Answer 3

Answer №2

The eventListener should be connected to window rather than popup:

window.addEventListener(
    'message',
    function (event) {
        console.log(event.data);
    },
    false
);

When you send a message from your child window (popup) to the parent window, make sure the eventListener is attached to the correct window.

Answer 4

The eventListener should be connected to window rather than popup:

window.addEventListener(
    'message',
    function (event) {
        console.log(event.data);
    },
    false
);

When you send a message from your child window (popup) to the parent window, make sure the eventListener is attached to the correct window.

Troubleshooting problems with Window.postMessage()

Answer №1

Solution for Issue 1

Solution for Issue 2

Solution for Issue 3

Solution for Issue 4

`http://localhost:7007/index.html`

`http://127.0.0.1:7007/popup.html`

Answer №2

Similar questions

What is the best way to structure Vue.js components for optimal organization?

Is it necessary for the scope to be separated?

The error message encountered is: "TypeError: Unable to access the 'apply' property of an undefined object within the

Stop the page from automatically scrolling to the top when the background changes

Unable to establish a connection with the default port on Mongo DB while utilizing Node.js

What is the best way to transform this JSON data into an array of key-value pairs in JavaScript?

What is the best way to obtain a unique dynamic id?

Encountering a problem with Nginx and WordPress where the admin-ajax.php is causing an issue when returning an AJAX result, leading to an error of Un

How to target child <div> elements within a parent <div> using jQuery

Create a directive for AngularJS that utilizes SVG elements without using the deprecated

Utilizing ReactJS to fetch data from Material-UI's <TableRow/> component upon selection - a comprehensive guide

What is the process for including a custom Jasmine matcher definition in Typescript?

Encountering issues with generating image files using createObjectURL after transitioning to NextJS 13 from version 10

Issues have been raised with IE11's refusal to accept string(variable) as a parameter for the localStorage

Are third-party scripts and HTML widgets able to replicate your website's data, including cookies, HTML, and other elements?

The wait function does not pause execution until the element is found within the DOM

When the child component's form is marked as dirty, the parent component can access it

IE11 encounters an error labeled SCRIPT1010, signaling an expected Identifier when compiled

Ways to observe redux action flow within a component

Error in ReactJS: Trying to access property 'items' of an undefined object