从iframe元素中访问jQuery数据

Question

假设我有一个页面在同一域名下，我将它放在一个iframe中。在iframe中，我向元素添加了数据，类似于这样：

HTML

<div id="data"></div>

脚本

$('#data')
    .data('test1', 'this is test data 1')
    .data('test2', ['John', 'Smith'])
    .data('test3', {
        alert1: function() {
            $('#data').append('test3: successful<br>');
        }
    })

现在，一旦这个页面嵌套在iframe中，我知道可以按照以下方式访问元素：

$('#frame').contents().find('#data');

但是当我尝试从该元素获取数据时，它总是未定义。

$('#frame').contents().find('#data').data('test1'); // shows up as undefined

我知道jQuery内部将data()存储在一个cache对象中，但我不知道如何从文档外部访问它。我设置了这个演示来展示我的问题。点击"Get Frame Data"按钮以查看结果。

我将不胜感激您的任何输入 :)

- Mottie

Answer 1

你需要从那个窗口的jQuery对象中获取缓存元素，如下所示：

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

然后要获取数据，使用$.data()，就像这样：

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

您可以在此处测试更新/工作演示。

---

这实际上访问的是：

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

- Nick Craver

---

@NickCraver，您是我的救星！ - alexserver

感谢 @NickCraver 挽救了我的一天！ - Gaurang Jadia

谢谢！最终我得到了可行的解决方案。只有这种方式，我才能够更改iframe中的数据，然后从iframe中访问它。 - Mantas Karanauskas

Answer 2

我从未尝试过这个，但我非常确定您需要与iframe的$对象交谈，而不是您文档中的对象，以访问该对象的内部数据存储。不太确定如何做到这一点-也许像这样：

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

（瞎猜）

肯定有效的方法是在iframe文档内部创建一个函数来获取数据并将其返回给您。但这比直接获取数据要不够优雅。

- Pekka

---

在contents()下没有jQuery对象，您需要使用window.frames['myFrame'].contentWindow.jQuery获取它。 - Roy Shoa