Created
May 28, 2011 16:56
-
-
Save topliceanu/997030 to your computer and use it in GitHub Desktop.
xPubSub.js allows for cross-frame custom DOM events synchronization. Requires jquery and postmessage.js
This file contains hidden or 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
| <!doctype html> | |
| <title> host </title> | |
| <meta charset="utf-8"> | |
| <div id="container">host.html</div> | |
| <script src="jquery-1.6.1.js"></script> | |
| <script src="jquery.tinypubsub.js"></script> | |
| <script src="postmessage.js"></script> | |
| <script src="xPubSub.js"></script> | |
| <script> | |
| var onReady = function(){ | |
| var x = target( 'iframe' ) ; | |
| x.subscribe( 'test' , function( data ){ | |
| console.log( 'host.html received cross event '+data.test ) ; | |
| }) ; | |
| x.subscribe( 'test2' , function( data ){ | |
| console.log( 'host.html recevied local event2 '+data.test2 ) ; | |
| }) ; | |
| x.publish( 'test2' , { test2 : 'ok' }) ; | |
| } ; | |
| var $iframe = $( '<iframe/>',{ | |
| 'src' : 'iframe.html' , | |
| 'id' : 'iframe' , | |
| 'name' : 'iframe' | |
| }) | |
| .bind( 'load', function(){ | |
| onReady() ; | |
| }) ; | |
| setTimeout( function(){ | |
| $iframe.appendTo( '#container' ) ; | |
| }, 1000 ) ; | |
| setTimeout( function(){ | |
| console.log( 'on load' ); | |
| $iframe | |
| .detach() | |
| .appendTo( '#container' ) ; | |
| }, 2000 ); | |
| setTimeout( function(){ | |
| console.log( 'on load' ); | |
| $iframe | |
| .remove() | |
| .appendTo( '#container' ) ; | |
| }, 3000 ); | |
| </script> |
This file contains hidden or 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
| <!doctype html> | |
| <title> host </title> | |
| <meta charset="utf-8"> | |
| <div id="container">iframe.html</div> | |
| <script src="jquery-1.6.1.js"></script> | |
| <script src="jquery.tinypubsub.js"></script> | |
| <script src="postmessage.js"></script> | |
| <script src="xPubSub.js"></script> | |
| <script> | |
| var onReady = function(){ | |
| var x = target( 'iframe' ) ; | |
| x.subscribe( 'test2' , function( data ){ | |
| console.log( 'iframe.html receives cross event2 '+data.test2 ) ; | |
| }) ; | |
| x.subscribe( 'test' , function( data ){ | |
| console.log( 'iframe.html received local event '+data.test ) ; | |
| }) ; | |
| x.publish( 'test' , { test : 'yes' }) ; | |
| } ; | |
| onReady() ; | |
| </script> | |
This file contains hidden or 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
| // dependencies : | |
| // 1. jQuery 1.4.2+ | |
| // 2. ben alman's jQuery tiny pub/sub at https://gist.github.com/661855 | |
| // 3. daepark's postmessage wrapper at https://github.com/daepark/postmessage | |
| (function( win, doc, _undef ){ | |
| var target = function( link ){ | |
| var getTarget = function(){ | |
| if( link !== _undef && win.frames[link] !== _undef ) { | |
| return win.frames[ link ] ; | |
| } | |
| if( win.parent !== _undef ){ | |
| return win.parent ; | |
| } | |
| else { | |
| throw Error( win.location.href+' : no target frame!' ) ; | |
| } | |
| } ; | |
| // publish events after the 'load' event of the target frame | |
| var publish = function( ev , data ){ | |
| data = data || {} ; | |
| win.$.publish( ev , [data] ) ; | |
| win.pm({ | |
| target : getTarget() , | |
| type : ev , | |
| data : data | |
| }) ; | |
| return that ; | |
| } ; | |
| // subscribers must be registered before a publish occurs | |
| var subscribe = function( ev , callback ){ | |
| win.pm.bind( ev, callback ) ; | |
| win.$.subscribe( ev, callback ) ; | |
| return that ; | |
| } ; | |
| var that = { | |
| publish : publish , | |
| subscribe : subscribe | |
| } ; | |
| return that ; | |
| } ; | |
| win.target = target ; | |
| })(window,document) ; |
Added the posibility to chain the methods.
Removed initConnection and onConnection because of inneficiency.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Added methods to establishes the connection between the two frames