How JavaScript objects passed with postMessage

1.8k views Asked by At

I have been playing with HTML postMessage and managed to pass messages between my web page and the popup window it opens.

index.html:

var popup;
window.onload = function () {
    console.log("window.onload");
    var btn = document.getElementById('signin');
    btn.addEventListener('click', signin);
};

var pollTimer;

function signin(e) {
    console.log("window.onload - signin");
    popup = window.open("http://www.olcayertas.com/testqa/redirect.html", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=10, left=700, width=600, height=600");

    pollTimer = window.setInterval(function () {

        if (popup.closed !== false) { // !== is required for compatibility with Opera
            window.clearInterval(pollTimer);
            document.getElementById('signin').style.visibility = 'hidden';
        }

        e.preventDefault();
        popup.postMessage('message', 'http://www.olcayertas.com/testqa/index.html');
        console.log("sendMessage - Message sent!!!");

    }, 500);
}

function receiveMessage(event){
    window.clearInterval(pollTimer);
}

window.addEventListener("message", receiveMessage, false);

popup.html:

console.log("script");
window.onload = first();
var messageEle;

function receiveMessage(e) {
    console.log("receiveMessage");
    messageEle = document.getElementById('message');
    messageEle.innerHTML = "Message Received: " + e.data;
    e.source.postMessage("Mesaj alındı!", e.origin);
}

function first() {
    console.log("first");
    window.addEventListener('message', receiveMessage);
}

What I need is redirect the user to an other page by setting top.location parameter in my popup window and pass the e.source parameter to this page so it can also send message to index.html. Since I do not know how the e parameter of the receiveMessage(e) function passed I am stuck.

How can I do that?

Thanks in advance.

0

There are 0 answers