Skip to content

Instantly share code, notes, and snippets.

@rudyjahchan
Created August 17, 2012 05:50
Show Gist options
  • Save rudyjahchan/3376283 to your computer and use it in GitHub Desktop.
Save rudyjahchan/3376283 to your computer and use it in GitHub Desktop.
Cross-Domain Browser Communication with HTML5 Window#postMessage; only loading windows if they don't already exist
// getting the window of an iframe
receiver = document.getElementById('frameId').contentWindow;
// opening a named window to another application
receiver = window.open('http://anotherdomain.dev/path', 'myPopup');
// getting a named window WITHOUT loading any content
receiver = window.open(null, 'myPopup');
receiver.postMessage('TET-SU-OOOOOOOO!!!', 'http://anotherdomain.dev');
window.addEventListener('message', function(event) {
// handle event ...
}, false);
if (event.origin === 'http://trusteddomain.dev') {
// continue handling
}
console.log(event.data); // with previous postMessage() example, this prints 'TET-SU-OOOOOOOO!!!'
event.source.postMessage('KA-NA-DAAAAAAAAAA!!!', event.origin);
(function initializeOpenUniquePopUp() {
var openedDomain = 'http://opened.dev';
var trackedWindows = {};
window.openUniquePopUp = function(path, windowName, specs) {
trackedWindows[windowName] = false;
var popUp = window.open(null, windowName, specs);
popUp.postMessage('ping', openedDomain);
setTimeout(checkIfOpen, 1000);
function checkIfOpen() {
if(!trackedWindows[windowName])
window.open(openedDomain + path, windowName, specs);
}
};
if(window.addEventListener)
window.addEventListener('message', onPingBackMessage, false);
else if (window.attachEvent)
window.attachEvent('message', onPingBackMessage, false);
function onPingBackMessage(event) {
if(event.origin == openedDomain) {
trackedWindows[event.data] = true;
}
}
})();
window.openUniquePopUp('/a-path', 'uniqueId', 'width=320,height=480');
(function listenForPings() {
var openerDomain = 'http://opener.dev';
if(window.addEventListener)
window.addEventListener('message', onPingMessage, false);
else if (window.attachEvent)
window.attachEvent('message', onPingMessage, false);
function onPingMessage(event) {
if(event.origin == openerDomain)
event.source.postMessage(window.name, event.origin);
}
})();
jQuery(window).on('message', onPingBackMessage);
function onPingBackMessage(event) {
if(event.origin == openedDomain) {
var messageEvent = event.originalEvent;
trackedWindows[messageEvent.data] = true;
}
}
@dev-raja
Copy link

dev-raja commented Nov 3, 2014

would be great if you can share the example for this cross domain messaging?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment