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.