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 customize multiple checkboxes in React Native?

Unexpected lag causing delays in jQuery animations

Not receiving connections on localhost port 3000

Preventing Javascript array elements from being overwritten: Best practices

What is the method for writing to an HTML file with the use of expressjs?

Consistently directing to a single page on the Node Js web server

Identify and sort JSON objects based on keys with multiple values

What is the best way to apply lodash's max function to a jQuery array?

Error encountered: Mocha - The property '$scope' cannot be read as it is undefined

What methods can be used to accomplish this effect using CSS and/or Javascript?

Refresh cloned element after making changes to the original element

Enhancing Security: Implementing Node.js API Authentication

Troubleshooting: Unable to Sort Column in ngx-DataTable Angular 4

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

Can I utilize p5.Vector.fromAngle() in Vue JS?

Prevent anchor link click and drag functionality on an HTML page / Swipe through a container containing links

Tips for preventing a page refresh using HTML, JQuery, AJAX, and PHP

Choose an image for a better view with the use of HTML and JavaScript/JQuery

Angular Leaflet area selection feature

The page does not seem to be reloading properly due to a redirect issue