Skip to content
A proxy to safely communicate to cross-domain iframes in javascript
JavaScript HTML CSS Ruby
Branch: master
Clone or download
georges Merge pull request #46 from lutangar/features/npm
Add package.json for npm support. Thanks @lutangar
Latest commit d3dcc86 Aug 11, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Updated specs Apr 8, 2012
example update build and demo files Jun 3, 2016
jsdoc
spec/javascripts
src update build and demo files Jun 3, 2016
.gitmodules Change submodule url Sep 16, 2011
.rvmrc Merged serialization from andreineculau fork Apr 4, 2012
Gemfile Updated specs Apr 8, 2012
Gemfile.lock Updated specs Apr 8, 2012
LICENSE Updated specs Apr 8, 2012
README.md Updated specs Apr 8, 2012
Rakefile Updated specs Apr 8, 2012
bower.json Update bower.json Feb 9, 2015
package.json

README.md

Porthole is a small library for secure cross-domain iFrame communication.

Usage

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.

Update

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.

Unit Tests

rake jasmine

Demo

http://sandbox.ternarylabs.com/porthole/

Project Page

http://ternarylabs.github.com/porthole/

You can’t perform that action at this time.