为什么jQuery的Ajax自动运行脚本? [英] Why does jQuery's ajax automatically run scripts?
问题描述
我最近注意到，如果在将jQuery注入内部iframe之后立即调用jQuery ajax，则jQuery将失去其功能-像jQuery(..).dialog()、. draggable以及任何其他插件.如果ajax调用被注释掉，则jQuery可以正常工作.这是一个已知的错误，还是我做错了什么?可以在该文件中看到此问题，而jQuery位于同一目录中.
I noticed recently that if jQuery ajax is called right after injecting jQuery into an inner iframe, jQuery loses its functions - like jQuery(..).dialog(), .draggable, and any other plugins. If the ajax call is commented out, the jQuery works fine. Is this a known bug, or something I'm doing wrong? This problem can be seen in this file, with jQuery in the same directory:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
Try and <button id="btn">load</button>
<iframe width=300 height=300></iframe>
<script>
"use strict";
jQuery('#btn').click(function(){
var $ = jQuery;
console.log(typeof jQuery('iframe').dialog);
var doc = jQuery('iframe')[0].contentDocument;
function insertscript(src) {
var newscript = doc.createElement('script');
newscript.setAttribute('src',src);
doc.documentElement.appendChild(newscript);
}
insertscript('jquery.js');
//This breaks the jQuery plugins:
var test = $.get('jquery.js',function(){
//Now we know jQuery should be in the frame.
});
//So does this:
//jQuery.ajax({url:'http://192.168.1.17/wordpress/wp-includes/js/jquery/jquery.js',cache:true,processData:false});
console.log(typeof jQuery('iframe').dialog);
window.setTimeout(function(){
//jQuery is no longer the original jQuery object. Note the cached reference $().dialog does exist though.
console.log('after awhile... dialog is ' + typeof jQuery('iframe').dialog);
},3000)
//jQuery.ajax({url:jqurl,cache:true,processData:false});
});
</script>
</body></html>
这是问题的最小样本，请确保iframe在将其他内容添加到iframe之前已经加载了某个jQuery.js(然后ajax应该具有缓存的脚本).
This is a minimal sample of the problem, making sure the iframe has loaded a certain jQuery.js (then ajax should have the cached script) before some other stuff is added to the iframe.
单击加载，过一会儿，控制台日志将显示一会儿...未定义对话框"-仅在使用ajax时.
Click load, and after while, console log will show "after awhile... dialog is undefined" - only when ajax was used.
更新:看起来 $.get('jquery.js')实际上正在运行脚本.当alert.js具有警报功能时， $.get('alert.js')显示警报.(对于jQuery，请重新定义全局jQuery引用.)为什么jQuery的ajax具有此行为?所有的ajax实现都会发生这种情况吗?
Update: It looks like $.get('jquery.js') actually runs the script. $.get('alert.js') shows an alert, when alert.js has an alert function. (In the case of jQuery, re-defining the global jQuery reference.) Why does jQuery's ajax have this behavior? Does this happen with all ajax implementations?
推荐答案
当有人回答得更早(答案被删除?)时，jQuery ajax会根据您请求的内容类型自动选择要执行的操作.(不幸的是，文档不足的功能).加载外部js不仅会在浏览器获取脚本后返回，还会运行脚本.
As someone answered earlier (whose answer got deleted?), jQuery ajax automatically chooses what to do depending on what type of content you requested. (An unfortunately under-documented feature). loading an external js will not just return when the browser has fetched the script, it will also run the script.
每当以后再包含jQuery时，它都会重写window.jQuery对象，因此删除了jQuery.prototype.dialog等.
Whenever you re-include jQuery at a later point, it rewrites the window.jQuery object, therefore removing the jQuery.prototype.dialog, etc.
在这种情况下，Firefox .watch函数可能会很有用，以查看在何处重新定义了某些内容.例如，这将为您提供所有重新定义jQuery的堆栈跟踪:
The Firefox .watch function can be helpful in cases like this, to see where something got redefined. This, for example, would give you a stack trace of anything that redefines jQuery:
window.watch('jQuery',function() { console.trace() } )
这篇关于为什么jQuery的Ajax自动运行脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
