Created
March 22, 2012 12:13
-
-
Save nfreear/2157976 to your computer and use it in GitHub Desktop.
Example of using HTML5 postMessage: listen for 'map_dialog_open' events from iSpot map embeds, implements an overlay effect.
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><meta charset=utf-8/><title>*iSpot map embeds / postMessage / overlay</title> | |
| <!-- Include example style sheet, see #ispot-overlay. --> | |
| <link rel="stylesheet" href="http://ispot-approval.open.ac.uk/sites/all/modules/custom/ispot_oembed/assets/ispot-embed.css" /> | |
| <div id="ispot-overlay"></div> | |
| <!-- Add a map embed. --> | |
| <p><a class=embed href="http://ispot-approval.open.ac.uk/map?habitat=indoors">Map: indoor habitat</a> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
| <script src="http://ispot-approval.open.ac.uk/scripts/jquery.oembed.js"></script> | |
| <!-- | |
| Include Josh Fraser's postmessage.js: http://onlineaspect.com/2010/01/15/backwards-compatible-postmessage | |
| --> | |
| <script src="http://ispot-approval.open.ac.uk/sites/all/modules/custom/ispot_oembed/js/postmessage.js"></script> | |
| <script> | |
| $.log = function(o){ if(typeof console!=='undefined')console.log(o); } | |
| $(document).ready(function() { | |
| $("a.embed").oembed(null, { | |
| // Set iSpot optional custom parameters. | |
| ispot: { debug: 1, post_message: 1 }, | |
| // Implement a callback. | |
| afterEmbed: function(data){ | |
| $.log(data); | |
| // Experimental: only add 'message' event handler for 'map' embeds. | |
| if (typeof data.sub_type !== 'undefined' && data.sub_type == 'map') { | |
| XD.receiveMessage(function(message){ | |
| $.log(message.data + " received on "+window.location.host); | |
| var event = message.data.replace(/ispot:/, ''), | |
| el = document.body; | |
| switch (event) { | |
| case 'map_dialog_open': | |
| el.className = 'do-overlay'; | |
| break; | |
| case 'map_dialog_close': | |
| el.className = ''; | |
| break; | |
| default: | |
| $.log('Unsupported event: '+event); | |
| break; | |
| } | |
| }, frames[0].src); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment