benalman.com Open in urlscan Pro
2606:4700:3035::ac43:d30b  Public Scan

Form analysis
1 forms found in the DOM

GET https://benalman.com/search/

<form method="get" action="https://benalman.com/search/">
  <input class="text search ti" id="search" type="text" name="q" value="">
  <button class="button-search" type="submit" accesskey="4">Search</button>
  <div class="clear"></div>
</form>

Text Content

Ben Alman  

 * Home |
 * News |
 * Music |
 * Portfolio |
 * Projects |
 * About

The content in this website is wildly out-of-date, but will be updated
eventually. Until then, feel free to checkout my Github page as well as my
latest musical project, The Entire Robot.
 * All |
 * AppleScript |
 * JavaScript |
 * jQuery |
 * Misc |
 * PHP





JQUERY POSTMESSAGE: CROSS-DOMAIN SCRIPTING GOODNESS

By "Cowboy" Ben Alman on August 23, 2009 8:19 PM |

jQuery postMessage enables simple and easy window.postMessage communication in
browsers that support it (FF3, Safari 4, IE8), while falling back to a
document.location.hash communication method for all other browsers (IE6, IE7,
Opera).

With the addition of the window.postMessage method, JavaScript finally has a
fantastic means for cross-domain frame communication. Unfortunately, this method
isn’t supported in all browsers. One example where this plugin is useful is when
a child Iframe needs to tell its parent that its contents have resized.

 * Release v0.5
 * Tested with jQuery 1.3.2 in Internet Explorer 6-8, Firefox 3, Safari 3-4,
   Chrome, Opera 9.
 * Download Source, Minified (0.9kb)
 * Follow the project on GitHub project page or report a bug!
 * View Full Documentation
 * Examples: Iframe resizing


AN EXAMPLE

Let’s say that you have a page at http://benalman.com/test.html with an Iframe.
Unfortunately, the Iframe contents live at http://rj3.net/test.html, and due to
cross domain security restrictions, the message ‘hello world’ that the Iframe
(child) wants to send to its parent can’t be received. Well, it can.. but only
in certain browsers, none of which are IE7, which is still the most popular
browser out there. With $.postMessage this is not only possible, but easy.

First, both parent and child pages need to include jQuery as well as the jQuery
postMessage plugin.

This code is in the “receiving” (parent) page:

$.receiveMessage(
  function(e){
    alert( e.data );
  },
  'http://rj3.net'
);


It basically lets the window know to look for messages, but only from
'http://rj3.net', and when they come in, alert them.

The “sending” (child) page executes this code:

$.postMessage(
  'hello world',
  'http://benalman.com/test.html',
  parent
);


In browsers where window.postMessage is supported, the message 'hello world' is
simply passed from the child frame to the parent window, and it is alerted. Very
simple!

In other browsers, the child window sets the parent window location to
http://benalman.com/test.html#hello%20world. Despite the fact that the entire
URL has been set, because only the location.hash has really changed, the browser
doesn’t completely reload the page. Instead, the hash change is detected and the
callback is called, and the message is alerted. For this reason, it is
absolutely mandatory that the full URL of the parent page be passed into
$.postMessage as its second param. This URL could be hard-coded into the
“sending” page, or passed in dynamically.

This is better illustrated using a live example, where an iframe lets its parent
know that its contents have changed, so that the Iframe can be resized.


NOTES

 * The MDC window.postMessage reference is very useful, so be sure to check it
   out if you have any questions about how the method and event work.
 * In browsers that don’t support window.postMessage, a “cache bust” parameter
   is added to the location.hash to ensure that multiple sequential-yet-same
   messages (like “toggle” for example) will each trigger the event.
 * In browsers that don’t support window.postMessage, this script might conflict
   with a fragment history plugin, because the location.hash is modified.
   Fortunately, the hashes this script creates match the /^#?\d+&/ regexp, so it
   is possible to filter them out.
 * In browsers that don’t support window.postMessage, because polling is used
   for detection of the location.hash change, care must be taken to ensure that
   $.postMessage isn’t called too rapidly, or messages may be lost. Ingenious
   non-polling methods exist for detecting a location.hash change, but because
   they require additional proxy Iframes and HTML files, I’ve chosen to keep it
   simple and use polling.

If you have any non-bug-related feedback or suggestions, please let me know
below in the comments, and if you have any bug reports, please report them in
the issues tracker, thanks!

Tags:
 * crossdomain |
 * iframe |
 * jquery |
 * plugin |
 * postmessage |
 * xss

Categories:
 * Projects |
 * jQuery


 * « Previous |
 * Recent Projects |
 * All Projects |
 * Next »


POST A COMMENT

 * Any of these HTML tags may be used for style: a, b, i, br, p, strong, em,
   pre, code.
 * Multi-line JavaScript code should be wrapped in <pre class="brush:js"></pre>
   (supported syntax highlighting brushes: js, css, php, plain, bash, ruby,
   html, xml)
 * Use &lt; instead of < and &gt; instead of > in the examples themselves.



jQuery postMessage: Cross-domain scripting goodness
jQuery postMessage enables simple and easy window.postMessage communication in
browsers that support it (FF3, Safari 4, IE8), while falling back to a
document.location.hash communication method for all other browsers (IE6, IE7,
Opera).
View the entire comment thread.

Search




PLEASE DONATE!

Your generous donation encourages me to continue developing and updating my
code!




ALL FEATURED PROJECTS

jQuery: BBQ, Bookmarklet Generator, cond, doTimeout, equalizeBottoms, getObject,
hashchange event, iff, longUrl, Message Queuing, Misc plugins, outside events,
postMessage, replaceText, resize event, Star Wipe, throttle / debounce, Untils,
unwrap, URL Utils, urlInternal

JavaScript: Battlelog Hacks, Bookmarklets, Debug, Emotify, Library Boilerplate,
Linkify

Other: Finder Copy Open Window Paths, Multi-Firefox Launcher, Safari View Source
in TextMate, Simple PHP Proxy, Simplified




ALL RECENT NEWS

 * Apparently, someone misses Makefiles
 * A Bit of Advice for the JavaScript Semicolon Haters
 * Partial Application in JavaScript
 * Why grunt? Why not something else?
 * Fixing "Retina" Image Scaling with Gyazo




STAY UPDATED

 * Subscribe to my news (email)
 * Subscribe to my photos (email)
 * Follow @cowboy on Twitter
 * Follow cowboy on GitHub






This website makes heavy use of PHP, JavaScript, XML and XSLT, and relies
greatly on the services and tools provided by Movable Type Open Source, JQuery,
Yahoo Pipes, FeedBurner and Flickr. Syntax highlighting is handled by
SyntaxHighlighter and the icons are Fam Fam Fam Silk.

All original photography and text on this website are Copyright © 2010-2012
"Cowboy" Ben Alman and are licensed under a Creative Commons
Attribution-Noncommercial-No Derivative Works 3.0 United States License. All
original code is Copyright © 2010-2012 "Cowboy" Ben Alman and dual licensed
under the MIT and GPL licenses (except where the transition is not yet complete,
and the code is still just MIT licensed). View the license page for more
details.