如何在 iframe 中使用来自父级的 jquery？答案

【问题标题】：How to use jquery from parent inside an iframe?如何在 iframe 中使用来自父级的 jquery？
【发布时间】：2012-06-08 13:43:34
【问题描述】：

我有一个文件，我们称之为 parent-win.html，由域 example.com 提供服务。该文件中包含 jquery。这个页面中嵌入了一个 iframe，我们称之为 iframe-win.html。 iframe-win.html 有一个表单元素，id 为form-elem，值为Hello World!。现在我在 iframe 中进行跟踪。

var jQuery = parent.jQuery;
console.log(jQuery('#form-elem').val());

根据我对 JS 的有限了解，我应该在控制台上看到 Hello World!，但我看到的是未定义。现在，我的问题是我需要在 iframe 中再次加载 jquery 还是可以使用已经加载到父窗口中的 jquery 对象？

请注意，这不是像往常一样从父/iframe 访问 iframe/父内容。

【问题讨论】：

Access jQuery library from iframe 的可能重复项

标签： javascript jquery iframe

【解决方案1】：

在 iframe 中试试这个：

if (typeof(jQuery) == "undefined") {
    var iframeBody = document.getElementsByTagName("body")[0];
    var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); };
    var $ = jQuery;
}

【讨论】：

这就是我要找的！我刚才问一位同事是否需要将 iframe 作为上下文传递给 jQuery。谢谢莫因！
这个答案没有考虑 jQuery 函数除了字符串选择器之外的所有其他参数类型。
我发现使用 document 比使用 iframebody 更好：return parent.jQuery(selector, document)
这不适用于fancybox。我该如何解决这个问题？
DOMException: 阻止了来源为“localhost:55783”的框架访问跨域框架。

【解决方案2】：

根据 Moin 的回答，这是一个更好的解决方案：

if (typeof(jQuery) == "undefined") {
    window.jQuery = function (selector) { return parent.jQuery(selector, document); };
    jQuery = parent.$.extend(jQuery, parent.$);
    window.$ = jQuery;
}

所以我们可以使用 $ 的函数，如 $.get、$.extends 等。

【讨论】：

也可以在head中使用，而Moin的答案必须放在body中
单线，快速而肮脏：window.$=window.jQuery=parent.jQuery.extend(function(s){return parent.jQuery(s,document)},parent.jQuery);
接受的解决方案对我不起作用。这个做到了。谢谢安德烈！

【解决方案3】：

你需要在iframe里面加载jQuery。

编辑：好的，如果框架不在同一个域上，那么您确实不必须重新加载 jQuery。见Access jQuery library from iframe

【讨论】：

我知道。但是，如果您在上面给出的示例中 console.log jQuery，它确实会显示 jQuery 对象。此外，我可以使用 parent.object() 从父对象访问对象，那么为什么不使用 jQuery？
Thom Smith，再次阅读您链接到的答案，因为如果 iframe 位于不同的域中，您必须在其中加载 jQuery。
链接到的答案不起作用，请参阅其 cmets 了解详细信息。