Access jQuery data from iframe element

Question

Lets say I have a page on the same domain that I put inside an iframe. In the iframe, I have added data to an element, something like this:

HTML

Answer 1

You need to get the cache element from that window's jQuery object, like this:

var windowjQuery = $('#frame')[0].contentWindow.$;
var f = $('#frame').contents().find('#data');

Then to get data, use $.data(), like this:

windowjQuery.data(f[0], 'test1')

You can test out your updated/working demo here.

---

What this is really accessing is:

var key = f[0][frame.contentWindow.$.expando];
var dataItem = frame.contentWindow.$.cache[key]["dataKey"];

Answer 2

I have never tried this, but I'm pretty certain you need to talk to the iframe's $ object instead of your document's one to access that object's internal data storage. Not 100% sure how to do that - maybe something like

$('#frame').contents().jQuery.find("#data").data("test")

(wild guess)

What would work for sure is a function inside the iframe document that fetches the data, and returns it to you. But that's much less elegant than fetching it directly, of course.