Javascript 如何在iFrame主体标记上设置jQuery data（），并从iFrame内部检索它？

我一直在尝试在我创建的iFrame上设置

data（）

这就是我正在做的：

  // options > my configuration object
  // options.src = eg "path/foo.html"
  // options.id = uuid
  // options.parent = $(elem)
  // options.param = JSON object 

  newHTML = document.createElement("iframe");
  newHTML.setAttribute("src", options.src);
  newHTML.setAttribute("frameborder", 0);
  newHTML.setAttribute("seamless", "seamless");
  newHTML.setAttribute("data-id", options.id);

  newParentElement = options.parent.parent()[0];
  options.parent.replaceWith( newHTML ); 

  // select 
  newRootElement = newParentElement.querySelectorAll(
    '[data-id="'+options.id+'"]'
  );

  // add configuration 
  $( newRootElement[0] ).load(function () {
    var newElement = $(this);
    if (options.param) {
      newElement.contents().find("body").attr("foo","bar").data("config", options.param);
    }
  });

当我查看iframe及其body标记时，attr（“foo”）的设置是正确的，我也可以像这样对其进行控制台操作：

  console.log(newElement.contents().find("body").attr("foo"));

但是当我尝试使用

data（）

或

data（“config”）

来控制台

config

时，如下所示：

  console.log(newElement.contents().find("body").data("config"));

它总是返回未定义的

问题：

为什么不能在iFrame上设置jQuery
data（）
？还是我做错了什么

谢谢你的帮助
 通过向
$（选择器，范围）
提供第二个参数，确保jQuery选择器正在相关范围内查找

$（函数（）{
var scope=$（'iframe'）[0]。contentWindow.document；//
$（'body'，scope）.data（'id'，'some id'）；//在iframe的主体上设置数据
console.log（$（'body'，scope.data（'id'））；//==>'some id'
});

在这里，我成功地将数据设置到iframe的主体，然后检索它：
通过向
$（选择器，范围）
提供第二个参数，确保jQuery选择器正在相关范围内查找

$（函数（）{
var scope=$（'iframe'）[0]。contentWindow.document；//
$（'body'，scope）.data（'id'，'some id'）；//在iframe的主体上设置数据
console.log（$（'body'，scope.data（'id'））；//==>'some id'
});

这里有一个fiddle，我成功地将数据设置到iframe的主体，然后检索它：
jQuery不将数据存储在元素本身中，而是存储在
jQuery.cache
中

在jQuery代码中，您有以下部分：

jQuery.expando: "jQuery" + ( core_version + Math.random() ).replace( /\D/g, "" )

正如您所看到的，每个jQuery加载都会创建一个唯一的expando

expando用作属性来存储带有DOM元素的标识符

使用
.data（key，value）
在元素中存储数据时，jQuery执行以下步骤：

检查
元素[jQuery.expando]
中是否有与元素一起存储的
id
，如果没有，它将创建唯一的
id
检查是否有带有
jQuery.cache[id]
的条目，如果没有，则创建一个空对象来存储该元素的数据
因此，如果调用
.data（key，value）
数据将存储在窗口中，您使用的jQuery实例将在其中定义

如果在
父对象中有一个jQuery对象，在
iframe
中有一个jQuery对象，则由于随机数的原因，它们有两个不同的
expandos
。如果从iframe元素上的parents jQuery对象调用
.data（）
，则会使用父对象的
expando
，并将数据存储在父对象中。如果使用iframes jQuery，然后在与之前相同的元素上调用
.data
，则iframe的jQuery将找不到任何数据，因为它一方面具有不同的
expando
，另一方面数据存储在父窗口中

因此，如果要在iframe中设置数据，应该使用iframes jQuery对象。
$（'iframe'）[0].contentWindow.jQuery（“body”）.data（…）
若要设置数据，则可以再次从iframe内部检索该数据，因为这样您就可以使用相同的jQuery对象来设置和读取数据

编辑
还有一个重要的补充说明。由于数据与使用过的jQuery实例一起存储，因此不应使用jQuery在其他上下文中存储数据。JQuery有一个清理方法，当您使用JQuery删除元素时会调用该方法，JQuery将删除事件侦听器并从
JQuery.cache
中删除数据。但是，如果使用jQuery存储另一个上下文中的元素的数据，此清理方法将失败（例如，如果在iframe中加载另一个页面）。因此，只有重新加载父元素时，数据才会被释放。
jQuery不会将数据与元素本身一起存储，而是存储在
jQuery.cache
中

在jQuery代码中，您有以下部分：

jQuery.expando: "jQuery" + ( core_version + Math.random() ).replace( /\D/g, "" )

正如您所看到的，每个jQuery加载都会创建一个唯一的expando

expando用作属性来存储带有DOM元素的标识符

使用
.data（key，value）
在元素中存储数据时，jQuery执行以下步骤：

检查
元素[jQuery.expando]
中是否有与元素一起存储的
id
，如果没有，它将创建唯一的
id
检查是否有带有
jQuery.cache[id]
的条目，如果没有，则创建一个空对象来存储该元素的数据
因此，如果调用
.data（key，value）
数据将存储在窗口中，您使用的jQuery实例将在其中定义

如果在
父对象中有一个jQuery对象，在
iframe
中有一个jQuery对象，则由于随机数的原因，它们有两个不同的
expandos
。如果从iframe元素上的parents jQuery对象调用
.data（）
，则会使用父对象的
expando
，并将数据存储在父对象中。如果使用iframes jQuery，然后在与之前相同的元素上调用
.data
，则iframe的jQuery将找不到任何数据，因为它一方面具有不同的
expando
，另一方面数据存储在父窗口中

因此，如果要在iframe中设置数据，应该使用iframes jQuery对象。
$（'iframe'）[0].contentWindow.jQuery（“body”）.data（…）
若要设置数据，则可以再次从iframe内部检索该数据，因为这样您就可以使用相同的jQuery对象来设置和读取数据

编辑
还有一个重要的补充说明。由于数据与使用过的jQuery实例一起存储，因此不应使用jQuery在其他上下文中存储数据。JQuery有一个清理方法，即cal