Javascript 从iframe重用jQuery对象？

我有一个

WYSIWYG

应用程序，它使用

iframe

将

div

转换为编辑器。应用程序内部使用

jQuery

和

jqueryui

作为其核心库。为了扩展应用程序的功能，我考虑使用

jQuery

和

jqueryui

，这在我的父级

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.dialog{appendTo:editorID} //Editor is in iframe

//在这里，我选择了来自父级的jQuery和
//jQuery=window.frames[0]。jQuery
div=jQuery（“”）
div.append（“FooBar”）
jQuery（“body”）.append（div）
div.dialog{appendTo:editorID}//编辑器在iframe中

---

有人知道当你这样做时会发生什么吗？这个jQuery对象会一直操作iframe DOM而不是父DOM吗？或者jQuery是否可以与新DOM配合使用。

jQuery缓存对文档的引用。但是，您可以从同一来源的iframe借用jQuery，并且您基本上无法依赖

$（选择器）

在文档内部进行隐式搜索-相反，您可以执行

$（文档）。查找（选择器）

将内容从iframe复制到父页面，只要：

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

父页面（承载iframe的页面）和子页面（iframe内部的页面）都满足以下条件：

两个页面必须具有匹配的：

• 协议（例如

  http:

  和

  https:

  将失败）
• 子域（例如

  http://app.domain.com

  和

  http://www.domain.com

  失败）*
• 域（不用说，

  apples.com

  和

  oranges.org

  失败）
• 端口（例如

  https://www.generic.com:8080

  和

  https://www.generic.com:8088

  失败）

*这是有办法的

在我脑海中，我知道两种传输节点的JavaScript方法：

• 复制品
• 移动

在将外部文档中的节点插入到当前文档中之前，应使用克隆（或采用）外部文档中的节点。从外部文档克隆到当前文档时，不鼓励使用

第一个演示在iframe加载后使用

importNode（）

复制iframe中外部页面的主体并将其附加到

（可以使用任何块元素）

第二个演示在单击事件中使用

importNode（）

。要查看结果，请单击按钮，然后向下滚动

注意：此过程也适用于

块

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);
}

---

这和我的有什么不同？请记住，在我的

父对象
DOM中，我没有
$
作为开始。在这里，某种解释可以帮助OP理解您提出的解决方案，而不仅仅是发布一行代码。