Html5 postMessage using jQuery, but not jQuery-postMessage script

Question

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(...).

gdoron · Accepted Answer · 2012-04-25 20:37:21Z

7

$("#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?

edited Apr 25, 2012 at 20:37

answered Apr 25, 2012 at 20:31

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ShelbyZ Over a year ago

Nothing in particular. I was just trying to figure out why what the result I was getting from jQuery was not matching up with document.getElementById(...).

gdoron Over a year ago

@ShelbyZ. because $() constructs jQuery objects and not retrieving the DOM element, like document.getElementById

ShelbyZ Over a year ago

I feel like my jQuery experience has been mostly a hack till it works as opposed to learning how exactly the data returned is formatted. It makes more sense now.

gdoron Over a year ago

@ShelbyZ. then you should take a tour on the jQuery API site, couple of hours and you're a jQuery ninja! it's not a hard library to understand.

Collectives™ on Stack Overflow

Html5 postMessage using jQuery, but not jQuery-postMessage script

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related