Created
August 17, 2012 05:50
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
receiver.postMessage('TET-SU-OOOOOOOO!!!', 'http://anotherdomain.dev'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.addEventListener('message', function(event) { | |
// handle event ... | |
}, false); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if (event.origin === 'http://trusteddomain.dev') { | |
// continue handling | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log(event.data); // with previous postMessage() example, this prints 'TET-SU-OOOOOOOO!!!' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
event.source.postMessage('KA-NA-DAAAAAAAAAA!!!', event.origin); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(window).on('message', onPingBackMessage); | |
function onPingBackMessage(event) { | |
if(event.origin == openedDomain) { | |
var messageEvent = event.originalEvent; | |
trackedWindows[messageEvent.data] = true; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
would be great if you can share the example for this cross domain messaging?