如何将 jQuery 对象从父文档传递到友好的 iframe？

Question

我正在尝试开发一个在 iframe 中利用 jQuery 的交互式小部件，但依赖于父文档中已经存在的 jQuery 对象，而不是为其自己的 jQuery 实例发出额外的服务器请求。这很重要，因为小部件将在页面上多次加载到父文档中 - 因此不需要每次出现在页面上时都需要 http 请求。相反，我想传递父对象的 jQuery 对象实例（我确信它会在父文档中可用）以在 iframe 中使用。

了解这是一个“友好”的 iframe（即允许与父文档公开通信），我认为它很简单：

window.jQuery = window.parent.jQuery;

虽然这似乎提供了可在 iframe 中使用的 jQuery 命名空间（并且记录此命名空间会显示预期的 jQuery 函数字符串），但它似乎无法引用 iframe 中的元素。例如：

window.jQuery = window.parent.jQuery;
console.log(jQuery); // logs: function (e,t){return new w.fn.init(e,t,r)}
console.log(jQuery('#elem-in-iframe')); // logs: []

因此，从父文档传递到 iframe 的 jQuery 对象似乎仍然受到父文档范围的限制。

最终，我不得不满足于在页面上加载的每个 iframe 中创建一个独立的 jQuery 实例 - 所以不是在初始页面加载时加载 jQuery 库 once，而是在初始页面加载以及每次将小部件注入父文档时。虽然这不会阻止父窗口加载，但由于 iframe 是独立加载的，因此这不是预期的结果。我想探索如何在 iframe 中从父级继承和使用 jQuery。

Answer 1

我认为你的假设是错误的

因此不需要每次出现在页面上时都要求 http 请求

只要浏览器从同一个 URL 获取 jQuery，它就会被浏览器缓存。这基本上是一个免费的请求。

现在，您不能随意“共享”jQuery 对象的原因是选择器有一个context。

用作上下文的 DOM 元素、文档或 jQuery

默认是document（我相信），当您访问父母对象时，默认是已经设置的文档。你应该能够做到：

window.jQuery = window.parent.jQuery;
jQuery('#elem-in-iframe', document)

在iframe中传入iframes窗口作为上下文，然后理论上应该可以工作。

您甚至可以在 iframe 中执行此操作：

window.jQuery = window.parent.jQuery;
$ = jQuery(document);

然后你就可以做

$('#elem-in-iframe')