重用 iframe 中的 jQuery 对象？

Posted 2023-05-09

【中文标题】重用 iframe 中的 jQuery 对象？

【英文标题】：Reuse jQuery object from an iframe?

【发布时间】：2016-07-30 13:32:43

【问题描述】：

我有一个WYSIWYG 应用程序，它使用iframe 将div 转换为编辑器。应用程序内部使用jQuery 和jQuery UI 作为其核心库。为了扩展应用程序的功能，我正在考虑使用 jQuery 和 jQuery UI，这在我的父级 DOM 中不可用

我有两个选择

在我的父 DOM 中加载库。从 iframe 本身获取库并开始扩展应用程序，即 jQuery = window.frames[0].jQuery。

后者使我免于将其加载到我的父级DOM，但是我遇到了一个问题，即对话框选择菜单无法按预期工作。它根本没有显示选项。代码是这样的：

// Here I chose both jQuery from parent and 
// jQuery = window.frames[0].jQuery
div = jQuery("<div id="dialog" title="Dialog"></div>")
div.append("<select><option>Foo</option>Bar<option></option></select>")
jQuery("body").append(div)
div.dialogappendTo:editorID //Editor is in iframe

有谁知道当你这样做jQuery = window.frames[0].jQuery 时会发生什么？这个 jQuery 对象是否会一直操作 iframe DOM 而不是父 DOM？或者 jQuery 是否可以与新的 DOM 一起正常工作。

【问题讨论】：

learn.jquery.com/using-jquery-core/faq/…

【参考方案1】：

只要满足以下条件，就可以将内容从 iframe 复制到父页面：

父页面（承载 iframe 的页面）和子页面（iframe 内的页面）都符合same-origin policy：

两个页面必须匹配：

协议（例如 http: 和 https: 会失败） 子域（例如 http://app.domain.com 和 http://www.domain.com 失败）* 域（不用说 apples.com 和 oranges.org 失败） 端口（例如 https://www.generic.com:8080 和 https://www.generic.com:8088 失败）

*有办法解决这个问题

在我的脑海中，我知道 2 个传输节点的 javascript 方法：

document.importNode()副本 document.adoptNode() 移动

外部文档中的节点应该先使用document.importNode() 克隆（或使用document.adoptNode() 采用），然后才能插入到当前文档中。从外部文档克隆到当前文档时，不鼓励使用node.cloneNode()。

第一个演示在 iframe 加载后使用 importNode() 将外部页面的正文复制到 iframe 中并将其附加到 <section> （可以使用任何块元素）。

第二个演示在点击事件上使用importNode()。要查看结果，请单击按钮，然后向下滚动。

注意：此过程也适用于<script> 块。

http://plnkr.co/edit/yUW2CYqDqrvEq5fT1ty6?p=preview

JavaScript

iFrame1.onload = function() 
  bodySnatcher('#iFrame1', '#display');

var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function() 
  bodySnatcher('#iFrame2', '#display');
, false);

function bodySnatcher(iframe, parent) 
  var iFrame = document.querySelector(iframe);
  var iBody = iFrame.contentWindow.document.getElementsByTagName("body")[0];
  var imported = document.importNode(iBody, true);
  document.querySelector(parent).appendChild(imported);

【参考方案2】：

jQuery 缓存对文档的引用。但是，您可以从同源 iframe 中借用 jQuery，并且您将主要无法依赖 $(selector) 在文档中隐式搜索 - 相反，您可以使用 $(document).find(selector)。

【参考方案3】：

jQuery = $(window).parents().frames[0].jQuery
//parent()

【讨论】：

这和我的有什么不同？请记住，我的 parent DOM 中没有 $ 开头。

某种解释来帮助 OP 理解您提出的解决方案将在这里非常有用，而不仅仅是发布一行代码。