我收到警告消息:
不赞成在主线程上使用同步XMLHttpRequest,因为它会对最终用户的体验产生不利影响。要获取更多帮助,请访问http://xhr.spec.whatwg.org/。
当执行包含脚本(具有local src
)的异步AJAX请求时,该脚本使用$.html()
方法插入到HTML中。我已将给定脚本更改为包含async="async"
,但警告消息仍然保留。
我已经开始调试问题的发现,我的附加<script>
是通过jQuery AJAX调用处理从jQuery.ajaxTransport
(http://code.jquery.com/jquery-1.10.0.js,#8663),在这里async
被设置为false
(这可能是在那里问题来自)。
现在-我该怎么办?
该消息显示在最新版本的Chrome和Firefox中。
虽然我无法在jsfiddle上提供测试用例,但以下是显示问题的测试用例:
test.html
<html>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: '/response.html',
success: function(response){
$(document.body).html(response);
}
})
});
</script>
</body>
</html>
response.html
<script type="text/javascript" src="/json.js" async="async"></script>
json.js
console.log('hi');
无需AJAX请求即可触发警告-只需插入一个 <script>
test2.html
<html>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script>
$(document).ready(function(){
$(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>');
});
</script>
</body>
</html>
值得注意的是,此问题已根据https://github.com/jquery/jquery/issues/2060进行了修复
更新:
这已在jQuery 3.x中修复。如果您无法升级到3.0以上的任何版本,则可以使用以下代码段,但请注意,现在您将丢失目标内容中脚本加载的同步行为。
您可以修复它,将xhr request的async选项显式设置为true
:
$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
options.async = true;
});
现在,浏览器警告使用同步XHR。MDN说这是最近实施的:
从Gecko 30.0开始(Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)
这是在Firefox和Chromium中实现更改的方法:
- https://bugzilla.mozilla.org/show_bug.cgi?id=969671
- http://src.chromium.org/viewvc/blink?view=revision&revision=184788
至于Chrome,人们报告说这是在版本39附近开始的。我不确定如何将修订/变更集链接到特定版本的Chrome。
是的,当jQuery将标记添加到页面(包括加载外部js文件的脚本标签)时,就会发生这种情况。您可以使用以下方式重现它:
$('body').append('<script src="foo.js"></script>');
我想jQuery将在将来的版本中解决此问题。在此之前,我们可以忽略它,也可以使用上面A. Wolff的建议。
即使是最新的jQuery都有这一行,因此您有以下选择:
- 自己更改jQuery的来源-但也许有充分的理由使用它
- 注意警告,请注意此选项已被弃用,不会过时。
- 更改您的代码,因此它不使用此功能
我认为在这种情况下,数字2是最明智的选择。
顺便说一下,如果您还没有尝试过,请尝试以下方法:$.ajaxSetup({async:true});
,但是我认为它不会起作用。
尽管使用async,但我还是被此错误消息困扰:true。原来实际的问题是使用该success
方法。我将此更改为done
,警告消失了。
success: function(response) { ... }
替换为:
done: function(response) { ... }
如果您只需要加载脚本,请不要像下面这样
$(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>');
试试这个
var scriptEl = document.createElement('SCRIPT');
scriptEl.src = "/module/script/form?_t="+(new Date()).getTime();
//$('#holder').append(scriptEl) // <--- create warning
document.body.appendChild(scriptEl);
就我而言,这是由Flexfla脚本引起的,该脚本是Cloudflare提供的“ CDNJS Selections”应用程序的一部分。
根据Cloudflare的说法,“此应用将于2015年3月弃用”。我将其关闭,该消息立即消失。
您可以通过访问https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com来访问应用程序
就我而言,如果我像这样追加脚本标签:
var script = document.createElement('script');
script.src = 'url/test.js';
$('head').append($(script));
我收到警告,但是如果我先将script标签附加到头部,然后更改src警告就消失了!
var script = document.createElement('script');
$('head').append($(script));
script.src = 'url/test.js';
工作正常!!
文章标签:ajax , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!