Html5 postMessage using jQuery, but not jQuery-postMessage script

dom, html, javascript, jquery

Solution

$("#frame1")    // This a jQuery object that encapsulate the DOM element.
$("#frame1")[0] // this is the DOM element.
//Or
$("#frame1").get(0) // this is the DOM element.

Full code:

$("#frame1")[0].contentWindow.postMessage("Hello from another domain", "http://dl.dropbox.com"); // DICE!

Updated Fiddle

But I find it awkward to use jQuery to select by `id` then extract the DOM element out of it, and not using jQuery at all. what's wrong with `document.getElementById`? those 15 extra chars?

Problem

So I was messing around with the Html5 PostMessage sample at Html5 Demos and I created a sample jsfiddle to see if I understood how it worked together. The demo makes use of `document.getElementById(...)` which I thought could be replaced with the jQuery selector `$("#...")`, but I got stuck on the because the returned object from the jQuery select does not have access to `contentWindow` while `document.getElementById(...)` does. ``` document.getElementById("frame1").contentWindow.postMessage("Hello from another domain", "http://dl.dropbox.com"); // works $("#frame1").contentWindow.postMessage("Hello from another domain", "http://dl.dropbox.com"); // no dice ``` I'm not entirely well versed in jQuery to know which of the many methods to call on the results object from the selector to get back to the result I would see from `document.getElementById(...)`.

Original source