重用 iframe 中的 jQuery 对象？

Question

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

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

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

Answer 2

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

Answer 3

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