从iframe重用jQuery对象？

I have a WYSIWYG application that converts a div to an editor using iframe. The application internally uses jQuery and jQuery UI as its core library. To extend the application's feature I was thinking of using jQuery and jQuery UI which is not available in my parent DOM

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

I have two choice

我有两个选择

Load the libraries in my parent DOM.Take the libraries from the iframe itself and start extending the application i.e jQuery = window.frames[0].jQuery.

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

The latter saves me from loading it over to my parent DOM, however I encountered an issue where a Dialog Select menu doesn't work as expected. It doesn't show up the options at all. The code is something like:

后者使我无法将其加载到我的父DOM,但是我遇到了一个问题,其中Dialog Select菜单无法按预期工作。它根本没有显示选项。代码类似于:

// 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

Does anyone know what happens when you do this jQuery = window.frames[0].jQuery? Is this jQuery object going to manipulate the iframe DOM all the time and not the parent DOM? Or is the jQuery going to work just fine with the new DOM.

有谁知道当你这样做时会发生什么jQuery = window.frames [0] .jQuery?这个jQuery对象是一直在操纵iframe DOM而不是父DOM吗?或者jQuery与新DOM一起工作得很好。

3 个解决方案

#1

Copying content from an iframe to the parent page is possible as long as:

只要符合以下条件,就可以将iframe中的内容复制到父页面:

Both parent page (the one hosting the iframe) and the child page (the one inside the iframe) meet the same-origin policy:

父页面(托管iframe的页面)和子页面(iframe内的页面)都符合同源策略:

Both pages must have matching:

两个页面必须匹配:

• Protocol (ex. http: and https: would fail)

协议(例如http:和https:会失败)

• Subdomain (ex. http://app.domain.com and http://www.domain.com fails)*

子域名(例如http://app.domain.com和http://www.domain.com失败)*

• Domain (goes without saying apples.com and oranges.org fails)

域名(不用说apple.com和oranges.org失败)

• Port (ex. https://www.generic.com:8080 and https://www.generic.com:8088 fails)

端口(例如https://www.generic.com:8080和https://www.generic.com:8088失败)

*There are ways around this

*有办法解决这个问题

Off the top of my head, I know 2 JavaScript methods that transfer nodes:

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

• document.importNode() copies
• document.adoptNode() moves

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they can be inserted into the current document. The use of node.cloneNode() is discouraged when cloning from an external document on to the current document.

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

The first demo uses importNode() after the iframe loads to copy the body of an external page in an iframe and append it to a <section> (any block element can be used).

第一个演示使用iframe加载后的importNode()来复制iframe中的外部页面的主体并将其附加到

(可以使用任何块元素)。

The second demo uses importNode() on a click event. To see the results, click the button, then scroll down.

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

Note: This procedure can apply to <script> blocks as well.

注意:此过程也适用于

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 caches a reference to the document. However, you can borrow jQuery from the same-origin iframe, and you'll primarily be unable to rely on $(selector) implicitly searching inside the document - instead, you can do $(document).find(selector).

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

#3

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