Retrieve jQuery instance within an iframe

Asked

Viewed 194 times

2

I need to recover jQuery instance embedded in my iframe, as we know there are several ways to recover jQuery instance, with references $, jQuery, window["$"], window["jQuery"].

The problem is that when I try to use this same method with an iframe the result is not the same, follow the code I am trying.

$("#frame").get(0).contentWindow.window["$"]

or 

var iframeWindow = $("#frame").get(0).contentWindow; 
console.log( iframeWindow["$"] );

Demonstration of my test

javascript jquery

  • Mister Tuyoshi, would you better explain your question...

  • @In the small forest I have an iframe that has the jQuery embedded, I need to recover jQuery instance of iframe.

2 answers

2


Not forgetting the potential problems caused by politics of the same origin, a possible solution for what you seek:

Example in Jsfiddle.

HTML

<iframe id="bubu" width="300" height="300"></iframe>

JS

// Conteúdo da iFrame com jQuery incluído e um alert() para vermos que chegou lá
var H = '<html><body><h1 id="hh">JavaScript</h1>';
    H += '<scr' + 'ipt src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scr' + 'ipt>';
    H += '<scr' + 'ipt>$(document).ready(function() {';
    H += 'alert("yay");';
    H += '});</scr' + 'ipt>';
    H += '</body></html>';

// apanhar a iFrame
var myIframe = document.getElementById("bubu");

// Escrever o conteúdo que preparamos
var myIframeContent =  myIframe.contentDocument ||  myIframe.contentWindow.document;
myIframeContent.open();
myIframeContent.write(H);
myIframeContent.close();

// Apanhar a janela (window) da iFrame
var myIframeWin = myIframe.contentWindow || myIframe.contentDocument;

// Alguns navegadores não devolvem a Window, tentamos ir busca-la
if (!myIframeWin.document) {
    myIframeWin = myIframeWin.parentNode();
}

// A instancia de jQuery
alert(myIframeWin["$"]);

Note: Tested only on Windows 8.1 running Google Chrome.

  • +1 Very good! You would know how to explain why when Iframe is populated in the original form of the question the browser blocks access?

1

I made a method to scan the object structure and try to find objects stored under the key $ and jQuery.

Attention: here it took about 30 seconds to finish, but it may take longer.

The search has a maximum depth of 4 levels.

jsfiddle

That way, you can see that it works:

var iframeWindow = $("#frame").get(0); 
var frame$ = iframeWindow.contentWindow.$;

Note: it will not be possible to find the variable if Iframe is not of the same origin as the container, because the browser will block it otherwise. Probably if you configure the server’s CORS to accept sharing resources, ai will be possible, but in this case you will need to have control over the server that provides Iframe content.

Create an empty Iframe in the hand, leaving the src blank will also cause your access to Iframe variables to be blocked. I tested with the example you provided at first and it didn’t work.

jsfiddle - proving it doesn’t work that way

  • Thank you very good explanation, I did not know that even while leaving the SRC empty yet I was violating the same-origin policy, What leaves me intrigued is why the example made by @Zuul works with SRC blank.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.