重用iframe中的jQuery对象

Reuse jQuery object from an iframe?

本文关键字：对象 jQuery 中的 iframe 重用      更新时间：2024-04-01

我有一个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时会正常工作吗。

只要：，就可以将内容从iframe复制到父页

父页面（承载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方法：

  • 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);
}
jQuery缓存对文档的引用。但是，您可以从相同来源的iframe借用jQuery，并且您将主要无法依赖$(selector)在文档内部隐式搜索，而是可以使用$(document).find(selector)。 
jQuery = $(window).parents().frames[0].jQuery
//parent()
相关文章：