Question

在挖掘S \ O后，我无法找到如何做到这一点。我使用javascript创建一个iframe，然后我将jQuery加载到iframe中。现在我只想在Iframe上下文中调用$ ajax等方法。以下是我的表现。

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

编辑：要使以下方法正常工作，iframe src无法指向其他域，并且必须设置，例如

iframe.src = "about:blank"

jquery“ $ ”是iframe的窗口对象的属性。

所以你可以使用

访问jquery

iframe.contentWindow.window.$

如果您想进行ajax通话，请执行以下操作：

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

此外，如果你想以正常的方式使用Jquery

$ = iframe.contentWindow.window.jQuery

注意：这应该在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？与安全问题有关吗？

如何在iframe上下文中使用jQuery方法

3 个答案: