从 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 对象中，但我不知道如何从该文档外部访问它。我设置了this demo 来显示我的问题。单击“获取帧数据”按钮查看结果。

如果有任何意见，我将不胜感激：)

Answer 1

你需要从那个窗口的jQuery对象中获取缓存元素，像这样：

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

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

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

You can test out your updated/working demo here.

---

这真正访问的是：

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

Answer 2

我从未尝试过这个，但我很确定您需要与 iframe 的 $ 对象而不是您的文档的对象对话才能访问该对象的内部数据存储。不是 100% 确定如何做到这一点 - 可能类似于

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

（胡乱猜测）

可以肯定的是，iframe 文档中的一个函数可以获取数据并将其返回给您。但这当然比直接获取它要优雅得多。