[p2pu-dev] Demo of Dead Simple Plugin of External Sites using HTML5 postMessage

Dan Diebolt dandiebolt at gmail.com
Fri Oct 14 15:51:51 UTC 2011


This is a live demo of using the HTML5's postMessage capability to
dynamically send messages between <iframe> embeded content on the P2PU
platform.

I am emulating a page p2pu page at this url:

https://www.quickbase.com/db/bgnbbn622?a=dbpage&pageID=4

If you enter a user name and blur the input a message will be sent to this
page:

http://jsbin.com/obimib/12/edit

If you answer the math question on the embedded page and blur the input a
message will be sent back to the host page and some feedback will be
displayed. Everything displayed within the red border exists on an external
web site (http://jsbin.com/obimib/12/). The demo works in recent versions of
Chrome and FireFox. Only the content within the demo section is working -
all the other branding, navigation and links will not work as I just
borrowed the source from p2pu.org

If you grock what this demo is doing (sending safe messages between two
sites on different protocols, domains and ports) and look at the brevity of
the code it will not take much more to realize that HTML5's postMessage
provides an extremely simple, safe and flexible way to bridge the same
origin policy. A small about of code in the P2PU platform and working out
the a formalized messaging format will allow external content, widgets,
services to be attached to the P2PU platform without additional staff
development time. An entire plugin architecture could be easily created to
allow outside developers, course organizer or users to create P2PU "plugins"
that would interoperate with P2PU without requiring staff development time
so long as they conformed to the TBD message protocol to exchangeable
information. Also this scheme provides a way where user identity could be
maintained across different different web sites and services.

Also you can fix the <iframe> height issue in a novel way since there are
simple ways to dynamically resize the <iframe> to match the size of the
<iframe> embeded content. In fact, the original demo I adopted this from did
precisely this:

http://benalman.com/projects/jquery-postmessage-plugin/
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.p2pu.org/pipermail/p2pu-dev/attachments/20111014/59244f20/attachment.html>


More information about the p2pu-dev mailing list