从iframe元素访问jQuery数据

时间:2010-11-04 21:12:53

标签: jquery iframe

假设我在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来显示我的问题。单击“获取帧数据”按钮以查看结果。

我很感激任何意见:)

2 个答案:

答案 0 :(得分:27)

你需要从那个窗口的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"];

答案 1 :(得分:1)

我从来没有尝试过这个,但我很确定你需要与iframe的$对象交谈而不是文档的对象来访问该对象的内部数据存储。不是100%肯定如何做到这一点 - 可能像

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

(疯狂猜测)

可以肯定的是,iframe文档中的一个函数可以获取数据并将其返回给您。但是,这当然不如直接取得它那么优雅。