如何在iFrame body标签上设置jQuery data（）并从iFrame中检索它？ [英] How to set jQuery data() on an iFrame body tag and retrieve it from inside the iFrame?

问题描述

我试图在我创建的iFrame上设置 data（）。

I'm stuck trying to set data() on an iFrame I create.

这就是我正在做：

  // 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及其正文标记时， attr（ foo）设置正确，我也可以像这样设置它：

When I look at my iframe and it's body tag, the attr("foo") is correctly set and I can also console it like so:

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

但当我尝试安装 config 使用 data（）或 data（config），如下所示：

but when I try to console the config using either data() or data("config"), like so:

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

它总是返回 undefined

问题：

为什么无法设置jQuery data（）在iFrame上？或者我做错了什么？

Question:
Why is it not possible to set a jQuery data() on an iFrame? Or am I doing something wrong?

感谢您的帮忙！

推荐答案

jQuery不会将数据与元素本身一起存储，而是存储在 jQuery.cache 中。

jQuery does not store the data with the element itself but in jQuery.cache.

在jQuery代码中你有这一部分：

In jQuery code you have this part:

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

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

As you can see for each jQuery load a unique expando is created.

expando用作存储DOM元素标识符的属性。

The expando is used as property to store an identifier with the DOM element.

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

When you store data with .data(key,value) in an element jQuery does the following steps:

1. 检查是否存在 id 与元素[jQuery.expando] 中的元素一起存储，如果没有创建唯一 id 。


2. 检查是否存在 jQuery.cache [id] 如果没有创建一个空对象来存储数据那里的元素。



1. check if there is an id stored with the element in element[jQuery.expando] if not it creates an unique id.
2. check if there is an entry with jQuery.cache[id] if not create an empty object for storing the data for the element there.

所以如果你打电话给 .data（键，值）数据存储在窗口中，您使用的jQuery实例定义在。

So if you call .data(key,value) the data is stored in the window the jQuery instance you use is defined in.

如果您在父级中有一个jQuery对象和 iframe 中的一个因为随机数而有两个不同的 expandos 。如果你从iframe的元素上的父jQuery对象调用 .data（），那么 expando 使用父级，数据存储在父级中。如果你然后使用iframes jQuery，然后在iframe的jQuery找不到任何数据的同一元素上调用 .data ，因为它一方面有一个不同的 expando 另一方面，数据存储在父窗口中。

If you have a jQuery object in the parent and one in the iframe these have two different expandos because of the random number. And if you call .data() from the parents jQuery object on an element of the iframe, the expando of the parent is used and the data is stored within the parent. If you then use the iframes jQuery and then call .dataon the same element as before the iframe's jQuery would not find any data because it has on the one hand a different expando and on the other hand the data is stored in the parent window.

所以如果你想设置数据iframe你应该使用iframes jQuery对象。
$（'iframe'）[0] .contentWindow.jQuery（body）。data（...）设置数据，然后是可以再次从iframe内部检索该数据，因为那时你使用相同的jQuery对象来设置和读取数据。

So if you want to set data in the iframe you should use the iframes jQuery object. $('iframe')[0].contentWindow.jQuery("body").data( ... ) to set the data, then it is possible to retrive that data from inside of the iframe again, because then you use the same jQuery object for setting and reading the data.

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

EDIT One additional and important note. Because the data is stored with the used jQuery instance, you should not use jQuery to store data in another context. JQuery has a cleanup methode that is called when you remove elements with jQuery which removes event listeners and removes the data from jQuery.cache. But if you use jQuery to store data for an element that is in another context this cleanup method will fail ( e.g. if you load another page in the iframe). So the data then will only be freed if you reload the parent.

这篇关于如何在iFrame body标签上设置jQuery data（）并从iFrame中检索它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！