jQuery postMessage: Cross-domain scripting goodness

Version: 0.5, Last updated: 9/11/2009

Project Homehttp://benalman.com/projects/jquery-postmessage-plugin/
GitHubhttp://github.com/cowboy/jquery-postmessage/
Sourcehttp://github.com/cowboy/jquery-postmessage/raw/master/jquery.ba-postmessage.js
(Minified)http://github.com/cowboy/jquery-postmessage/raw/master/jquery.ba-postmessage.min.js (0.9kb)
Summary
jQuery postMessage: Cross-domain scripting goodnessVersion: 0.5, Last updated: 9/11/2009
LicenseCopyright © 2009 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses.
ExamplesThis working example, complete with fully commented code, illustrates one way in which this plugin can be used.
Support and TestingInformation about what version or versions of jQuery this plugin has been tested with and what browsers it has been tested in.
Release History
Functions
jQuery.postMessageThis method will call window.postMessage if available, setting the targetOrigin parameter to the base of the target_url parameter for maximum security in browsers that support it.
jQuery.receiveMessageRegister a single callback for either a window.postMessage call, if supported, or if unsupported, for any change in the current window location.hash.

License

Copyright © 2009 “Cowboy” Ben Alman, Dual licensed under the MIT and GPL licenses.  http://benalman.com/about/license/

Examples

This working example, complete with fully commented code, illustrates one way in which this plugin can be used.

Iframe resizinghttp://benalman.com/code/projects/jquery-postmessage/examples/iframe/

Support and Testing

Information about what version or versions of jQuery this plugin has been tested with and what browsers it has been tested in.

jQuery Versions1.3.2
Browsers TestedInternet Explorer 6-8, Firefox 3, Safari 3-4, Chrome, Opera 9.

Release History

0.5(9/11/2009) Improved cache-busting
0.4(8/25/2009) Initial release

Functions

jQuery.postMessage

This method will call window.postMessage if available, setting the targetOrigin parameter to the base of the target_url parameter for maximum security in browsers that support it.  If window.postMessage is not available, the target window’s location.hash will be used to pass the message.  If an object is passed as the message param, it will be serialized into a string using the jQuery.param method.

Usage

jQuery.postMessage( message, target_url [, target ] );

Arguments

message(String) A message to be passed to the other frame.
message(Object) An object to be serialized into a params string, using the jQuery.param method.
target_url(String) The URL of the other frame this window is attempting to communicate with.  This must be the exact URL (including any query string) of the other window for this script to work in browsers that don’t support window.postMessage.
target(Object) A reference to the other frame this window is attempting to communicate with.  If omitted, defaults to `parent`.

Returns

Nothing.

jQuery.receiveMessage

Register a single callback for either a window.postMessage call, if supported, or if unsupported, for any change in the current window location.hash.  If window.postMessage is supported and source_origin is specified, the source window will be checked against this for maximum security.  If window.postMessage is unsupported, a polling loop will be started to watch for changes to the location.hash.

Note that for simplicity’s sake, only a single callback can be registered at one time.  Passing no params will unbind this event (or stop the polling loop), and calling this method a second time with another callback will unbind the event (or stop the polling loop) first, before binding the new callback.

Also note that if window.postMessage is available, the optional source_origin param will be used to test the event.origin property.  From the MDC window.postMessage docs: This string is the concatenation of the protocol and “://”, the host name if one exists, and “:” followed by a port number if a port is present and differs from the default port for the given protocol.  Examples of typical origins are https://example.org (implying port 443), http://example.net (implying port 80), and http://example.com:8080.

Usage

jQuery.receiveMessage( callback [, source_origin ] [, delay ] );

Arguments

callback(Function) This callback will execute whenever a jQuery.postMessage message is received, provided the source_origin matches.  If callback is omitted, any existing receiveMessage event bind or polling loop will be canceled.
source_origin(String) If window.postMessage is available and this value is not equal to the event.origin property, the callback will not be called.
source_origin(Function) If window.postMessage is available and this function returns false when passed the event.origin property, the callback will not be called.
delay(Number) An optional zero-or-greater delay in milliseconds at which the polling loop will execute (for browser that don’t support window.postMessage).  If omitted, defaults to 100.

Returns

Nothing!

This method will call window.postMessage if available, setting the targetOrigin parameter to the base of the target_url parameter for maximum security in browsers that support it.
Close