4

as you know, using the API postMessage of html5, we can post message to an iframe of the current page, or to a new popup window, but if we code like this:

var popwindow = window.open('http://localhost:8080/index2.html');
popwindow.postMessage({"age":10}, 
   'http://localhost:8080/index2.html');

we will not get the message for we use "postMessage" when the popup window has not loaded yet, so how can we make sure the popup window is loaded? we cannot use popwindow.onload in the current page, so how can we? pls help me ~ thanks

hanzichi
  • 609
  • 2
  • 12
  • 22

2 Answers2

7

you could alwyas use 

window.opener.postMessage(...

in index2.html to signal the opener that it is loaded

or, there's the oldschool way:

in index.html

function imOpen(win) {
    win.postMessage(// whatever ... 
}
window.open('index2.html');

in index2.html

window.addEventListener('load', function() {
    window.opener.imOpen(window);
});
Jaromanda X
  • 53,868
  • 5
  • 73
  • 87
  • i tried this way, it seems "window.opener.imOpen(window);" does not work as expected, i do not know why. – hanzichi Jul 10 '15 at 01:43
  • it seems that if we want to use "window.opener.imOpen(window);", the two urls must be same origin – hanzichi Jul 10 '15 at 01:48
  • hanzichi, you should update this question to mention that your problem is with cross-domain urls. This example will only work with same domain urls. Once you go cross-domain, you can't use window.opener...you will get a cross-domain security exception. – cakidnyc Feb 27 '20 at 17:48
  • @cakidnyc - this question/answer is almost 5 years old :p – Jaromanda X Feb 27 '20 at 21:41
  • @JaromandaX - true, but it's an issue where there is a lot of confusion. Having that info in the question at the beginning would have saved me a lot of time reading through this : ). BTW, I just posted this related to cross-domain popups loading and postMessage here: https://stackoverflow.com/questions/47282352/how-do-i-check-if-the-opened-cross-domain-window-is-ready-to-receive-postmessage/60459950#60459950 – cakidnyc Feb 28 '20 at 22:57
1

You don't need the postMessage API for a popup window being used this way.

//Inside parent window
var data = {age: 10};    //No quotes around age
window.open('http://localhost:8080/index2.html');


//Inside popup window
var sameData = window.opener.data;

Admittedly though, you probably shouldn't use a popup window through window.open(...), since they get blocked all the time.

If you go with an iframe modal, you might be able to get the postMessage way to work by doing something like

//In iframe
window.addEventListener("message", iframeReceiveMessage);
document.addEventListener("DOMContentLoaded", function() {
    //JSON data for message
    window.parent.postMessage("iframe is ready", "http://localhost:8080");
});

function iframeReceiveMessage(event) {
    var iframeData = JSON.parse(event.message);
    //iframeData.age === 10
}

and then listening in the parent with:

//In parent
window.addEventListener("message", parentReceiveMessage);

function parentReceiveMessage(event)
{
    if (event.origin !== "http://localhost:8080" && event.message !== "iframe is ready") { return; }

    var iframe = document.getElementById("iframeId").contentWindow,
        parentData = {age: 10};
    iframe.postMessage(JSON.stringify(parentData), "http://localhost:8080"); 
}

Since some browsers only accept strings in the postMessage response so you'd have to convert your data to JSON.

Still, it's probably overkill for sending object data. If you're already on the same domain, have you thought about using sessionStorage? https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

You'll still have to use JSON.stringify and JSON.parse (sessionStorage only stores strings), but it's pretty simple:

//Store it
var data = {age: 10};
sessionStorage.data = JSON.stringify(data);

//Use it
var newData = JSON.parse(sessionStorage.data);

//Remove it
sessionStorage.removeItem("data");

One drawback to this method is that sessionStorage is separate for HTTPS pages, so you can't send sessionStorage data between the two protocols!

Jeffers
  • 29
  • 4
  • i think that you may misunderstand my problem. "window.opener.data" may cannot be used when the current window and popup window have different origins, right? – hanzichi Jul 10 '15 at 01:50
  • Correct. When use window.open() to open a url with a different domain, then you cannot access window.opener in the popup. You will get a cross-domain security exception. This example won't work, it assumes same origin urls. – cakidnyc Feb 27 '20 at 17:40