CODEWITHSUNDEEP
javascriptjqueryhtmldomiframe
Nishant
Nishant

Reputation: 21934

Reuse jQuery object from an iframe?

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.

Upvotes: 1

Views: 563

Answers (3)

zer00ne
zer00ne

Reputation: 44088

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:

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

Upvotes: 1

LJHarb
LJHarb

Reputation: 39674

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

Upvotes: 1

Rajiv
Rajiv

Reputation: 78

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

Upvotes: 0

Related Questions