从iframe重用jQuery对象？ [英] Reuse jQuery object from an iframe?

问题描述

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

我有两个选择

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

后者让我无法将它加载到我的父 DOM ，但是我遇到了一个问题，即对话框选择菜单无法按预期工作。它根本没有显示出选项。代码如下所示：

  //这里我选择了父类中的jQuery和
 // jQuery = window。 frames [0] .jQuery 
 div = jQuery（< div id =dialogtitle =Dialog>< / div>）
 div.append（< select> < / option> Bar< option>< / option>< / select>）
 jQuery（body）。append（div）
 div.dialog {appendTo： editorID} //编辑器在iframe中
  

有人知道当你这样做时会发生什么 jQuery = window.frames [0] .jQuery ？这个jQuery对象会一直操纵iframe DOM，而不是父DOM？或者是jQuery对新的DOM起作用。

只要：b
$ b

父页面（托管iframe的页面）和子页面（iframe内的页面）符合同源政策：

两个页面必须匹配：

• 协议（例如 http： code>和 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/编辑/ yUW2CYqDqrvEq5fT1ty6？p =预览

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

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

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.

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:

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

解决方案

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

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

Both pages must have matching:

• Protocol (ex. http: and https: would fail)
• Subdomain (ex. http://app.domain.com and http://www.domain.com fails)*
• Domain (goes without saying apples.com and oranges.org fails)
• Port (ex. https://www.generic.com:8080 and https://www.generic.com:8088 fails)

*There are ways around this

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

• 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.

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).

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

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

这篇关于从iframe重用jQuery对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！