Wie man jQuery-Methoden innerhalb eines iframe-Kontexts verwendet

Question

Ich konnte nicht finden, wie man das macht, nachdem ich durch S \ O gegraben habe. Ich benutze Javascript, um einen iframe zu erstellen, und dann lade ich jQuery in den Iframe. Jetzt möchte ich nur Methoden wie $ ajax im Iframe-Kontext aufrufen. Unten ist, wie ich es gemacht habe.

var iframe = document.createElement('iframe'); 
iframe.name = "loginFrame"; 
iframe.id = "loginFrame"; 
document.body.appendChild(iframe); 
var idocument = iframe.contentWindow.document; 
var jq = idocument.createElement('script'); 
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"; 
idocument.getElementsByTagName('body')[0].appendChild(jq); 
jq.onload = function() { 
} 

Dies funktioniert und idocument in der Tat wird die jQuery-Skript in ihrem Körper haben. Wie würde ich jetzt mithilfe von Iframe mit jQuery telefonieren?

idocument.$.ajax(url, settings) 

Geht nicht und gibt Uncaught TypeError: Cannot read property 'ajax' of undefined Fehler. Jede Hilfe wird sehr geschätzt?

Answer 1

EDIT: Für das folgende Verfahren kann richtig die iframe src arbeiten nicht an einer anderen Domäne zeigen und muss eingestellt werden, zum Beispiel

iframe.src = "about:blank" 

Die jquery "$" ein ist Attribut des Fensterobjekts des Iframes.

So können Sie jquery mit Zugang

iframe.contentWindow.window.$ 

Wenn Sie einen Ajax-Aufruf machen wollten Sie tun würde:

iframe.contentWindow.window.$.ajax(url, settings) 

Auch wenn Sie Jquery die normale Art und Weise verwenden möchten Sie tun können

$ = iframe.contentWindow.window.jQuery 

Hinweis: Th ist, sollte in jq.onload sein und dies mit jQuery wird in Konflikt geraten, wenn es auf der Hauptseite ist, so dass Sie stattdessen tun könnte:

das hilft

iframe.$ = iframe.contentWindow.window.jQuery 

Hoffnung!

Answer 2

Haben Sie das versucht? iframe.contentWindow.$.ajax(url, settings)

Answer 3

Das fand ich für mich gearbeitet, ein Verfahren aus einer anderen SO-Lösung:

[Stackoverflow] Why does appending a <script> to a dynamically created <iframe> seem to run the script in the parent page?

ersten 3 Zeilen Code dann:

//* Updated to use the 2.1.4 jquery...(and tested still works!) 
// create a string to use as a new document object 
var val = '<scr' + 'ipt type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></scr' + 'ipt>'; 

//If you want to add further script tags un-comment: 
//val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>'; 

// get a handle on the <iframe>d document (in a cross-browser way) 
var doc = iframe.contentWindow || iframe.contentDocument; 
if (doc.document) { 
doc = doc.document; 
} 

// open, write content to, and close the document 
doc.open(); 
doc.write(val); 
doc.close(); 

//Assuming this is the first script tag in the iframe... 
doc.getElementsByTagName('script')[0].onload = function() { 

//* necessary for cross-browser function have to get the original document context: 
var doc = iframe.contentWindow || iframe.contentDocument; 

//Edited to initialize $ not in global namespace yet: 
// to scope the jQuery's $ to the iframe... 
var $ = doc.$; 
//Finally you can use jQuery to do ajax 
$.ajax({ }); 
} 

Aus Neugier, warum Können Sie dem übergeordneten Fenster keinen Zugriff auf jQuery geben? Hat etwas mit Sicherheitsproblemen zu tun?