Created
July 31, 2012 23:41
-
-
Save triptych/3221742 to your computer and use it in GitHub Desktop.
YUI Communication Layer Demo
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
| YUI Communication Layer: | |
| Working demo: http://dl.dropbox.com/u/3688/commlayer/host.html | |
| (view with console on so you see the Y.log events) | |
| Based off of : http://yuilibrary.com/gallery/show/communication-layer | |
| Clicking the button demonstrates how you can send events from the guest page back up into the host. | |
| You pass info into the guest from the host using the proxy.fire() and pass data along with the event. |
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
| <html> | |
| <head> | |
| <script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| // As the child application | |
| YUI({ | |
| //Last Gallery Build of this module | |
| gallery: 'gallery-2012.07.05-20-01' | |
| }).use('gallery-communication-layer', function(Y) { | |
| Y.CL = Y.CL || new Y.CommunicationLayer(); | |
| Y.CL.on('pageinfo', function (e) { | |
| var pageData = e.data; | |
| Y.log(pageData); | |
| }); | |
| Y.CL.ready(); // ready signal | |
| Y.one("#btn").on("click", function(){ | |
| Y.CL.fire("navigate"); | |
| window.location.href="guest2.html"; | |
| }) | |
| }); | |
| </script> | |
| <button id="btn"> go somewhere </button> | |
| </body> | |
| </html> |
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
| <html> | |
| <head> | |
| <script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| // As the child application | |
| YUI({ | |
| //Last Gallery Build of this module | |
| gallery: 'gallery-2012.07.05-20-01' | |
| }).use('gallery-communication-layer', function(Y) { | |
| Y.CL = Y.CL || new Y.CommunicationLayer(); | |
| Y.CL.on('pageinfo', function (e) { | |
| var pageData = e.data; | |
| Y.log(pageData); | |
| }); | |
| Y.CL.ready(); // ready signal | |
| Y.one("#btn").on("click", function(){ | |
| Y.CL.fire("navigate"); | |
| window.location.href="guest.html"; | |
| }) | |
| }); | |
| </script> | |
| <button id="btn"> go back </button> | |
| </body> | |
| </html> |
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
| <html> | |
| <head> | |
| <script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script> | |
| <style> | |
| iframe{ | |
| border: 1px solid red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // As the parent application | |
| YUI({ | |
| //Last Gallery Build of this module | |
| gallery: 'gallery-2012.07.05-20-01' | |
| }).use('gallery-communication-layer', function(Y) { | |
| Y.CL = Y.CL || new Y.CommunicationLayer(); | |
| // The src attribute is required for registration | |
| var iframe = Y.Node.create('<iframe src="guest.html">'); | |
| function navigateHandler (e){ | |
| Y.log("navigateHandler"); | |
| Y.log(e); | |
| } | |
| var pageData = { | |
| a: 1, | |
| apple: "cool" | |
| } | |
| Y.CL.register(iframe, function (proxy) { | |
| proxy.on('navigate', navigateHandler); | |
| // Logic to execute when the child signals readiness | |
| proxy.ready(function () { | |
| Y.log("proxy.ready"); | |
| proxy.fire('pageinfo', pageData); | |
| }); | |
| }); | |
| Y.one("body").append(iframe); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment