Porthole is a small library for secure cross-domain iFrame communication.
Include the Javascript.
<script type="text/javascript" src="porthole.min.js"></script>Create your content iFrame. This is where the guest content lives. Make sure to give it a name.
<iframe id="guestFrame" name="guestFrame" src="http://other-domain.com/">
</iframe>Define an event handler if you want to receive messages.
function onMessage(messageEvent) {
/*
messageEvent.origin: Protocol and domain origin of the message
messageEvent.data: Message itself
messageEvent.source: Window proxy object, useful to post a response
*/
}Create a window proxy object on the main page.
var windowProxy;
window.onload=function(){
// Create a proxy window to send to and receive
// messages from the iFrame
windowProxy = new Porthole.WindowProxy(
'http://other-domain.com/proxy.html', 'guestFrame');
// Register an event handler to receive messages;
windowProxy.addEventListener(onMessage);
};Create a window proxy object in the iFrame.
var windowProxy;
window.onload=function(){
// Create a proxy window to send to and receive
// messages from the parent
windowProxy = new Porthole.WindowProxy(
'http://parent-domain.com/proxy.html');
// Register an event handler to receive messages;
windowProxy.addEventListener(function(event) {
// handle event
});
};Send a message.
windowProxy.post({'action': 'supersizeme'});Note that if you have multiple iFrames, you can create as many WindowProxy objects as needed.
The library has been updated. It is not compatible with previous versions.
- Support JSON serialization
- Bug fix for IE 8
- Bug fix for multiple event handler in native browser support.
rake jasmine