Как использовать методы jQuery внутри контекста iframe

Question

Я не мог найти, как это сделать после проскальзывания через S \ O. Я использую javascript для создания iframe, а затем загружаю jQuery в iframe. Теперь я просто хочу вызывать методы, такие как $ ajax в контексте Iframe. Вот как я это сделал.

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() { 
} 

Это работает и idocument будет на самом деле есть скрипт JQuery в его теле. Теперь, используя iframe, как мне делать вызовы с помощью jQuery?

idocument.$.ajax(url, settings) 

Не работает и возвращает Uncaught TypeError: Cannot read property 'ajax' of undefined ошибку. Любая помощь высоко ценится?

Answer 1

EDIT: Для следующего метода, чтобы работать должным образом в IFRAME SRC не может указывать на другой домен, и должен быть установлен, например

iframe.src = "about:blank" 

JQuery "$" является атрибут окна окна iframe.

Таким образом, вы можете получить доступ к JQuery с помощью

iframe.contentWindow.window.$ 

Если вы хотите, чтобы сделать AJAX вызов, который вы могли бы сделать:

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

Кроме того, если вы хотите использовать JQuery обычным способом вы можете сделать

$ = iframe.contentWindow.window.jQuery 

Примечание: Th это должно быть в jq.onload и это будет конфликтовать с JQuery, если он находится на главной странице, чтобы вы могли вместо этого сделать:

iframe.$ = iframe.contentWindow.window.jQuery 

Надеется, что это помогает!

Answer 2

Вы пробовали это? iframe.contentWindow.$.ajax(url, settings)

Answer 3

Я нашел, что это работает для меня, используя метод из другого SO решения:

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

Первые 3 строки кода затем:

//* 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({ }); 
} 

из любопытства почему не можете ли вы предоставить родительскому окну доступ к jQuery? Что-то связанное с проблемами безопасности?