JavaScript console.log导致错误:“主线程上的同步XMLHttpRequest已被弃用…”
我一直在向控制台添加日志,以检查不同variables的状态,而不使用Firefoxdebugging器。
但是,在我的main.js
文件中添加了一个console.log
许多地方,我收到下面的错误,而不是我可爱的小手写消息给自己:
主线程上的同步XMLHttpRequest由于对最终用户的体验有不利的影响而被弃用。 更多帮助http://xhr.spec.whatwg.org/
什么替代品或包装console.log
可以添加到我的代码使用,不会导致此错误?
我是否“做错了”?
这发生在我懒惰的时候,并且包含一个脚本标记作为返回内容的一部分。 因此:
部分HTML内容:
<div> SOME CONTENT HERE </div> <script src="/scripts/script.js"></script>
看来,至less在我的情况下,如果你通过xhr返回HTML内容,你会导致jQuery调用来获取该脚本。 该调用发生在asynchronous标志为假的情况下,因为它假定您需要脚本来继续加载。
在这样的情况下,通过查看某种绑定框架并返回一个JSON对象,或者根据您的后端和模板,您可以更改如何加载脚本。
你也可以使用jQuery的getScript()
来获取相关的脚本。 这里是一个小提琴,它只是jQuery示例的直接副本,但是当以这种方式加载脚本时,我看不到任何警告。
警告消息可能是由于主线程中的asynchronous标志设置为false的XMLHttpRequest请求引起的。
https://xhr.spec.whatwg.org/#synchronous-flag :
工作人员之外的同步XMLHttpRequest正在从Web平台中移除,因为它对最终用户的体验有不利的影响。 (这是一个漫长的过程,需要很多年的时间。)当JavaScript全局环境是一个文档环境时,开发人员不能为asynchronousparameter passing错误。 强烈build议用户代理在开发人员工具中警告这种用法,并且可能会尝试在发生InvalidAccessErrorexception时抛出exception。
未来的方向是只允许工作线程中的XMLHttpRequests。 该信息旨在成为这方面的警告。
我也面临同样的问题,但能够通过把async:true来解决它。 我知道这是默认情况下是正确的,但是当我明确地写它时,它是有效的
$.ajax({ async: true, // this will solve the problem type: "POST", url: "/Page/Method", contentType: "application/json", data: JSON.stringify({ ParameterName: paramValue }), });
Visual Studio 2015/2017的实时debugging器正在注入包含已弃用呼叫的代码。
有时需要ajax加载脚本,但延迟文档准备好,直到加载脚本。
jQuery支持holdReady()
函数。
用法示例:
$.holdReady(true); //set hold function releaseHold() { $.holdReady(false); } //callback to release hold $.getScript('script.js', releaseHold); //load script then release hold
实际的脚本加载是asynchronous的( 没有错误 ),但是如果在文档准备好之后JavaScript的其余部分运行,则效果是同步的。
这个高级特性通常被dynamic脚本加载器使用,即使DOM可能已经准备就绪,在允许发生ready事件之前也要加载额外的JavaScript,比如jQuery插件。
实际上@Webgr的部分答案帮助我debugging了这个警告@控制台日志,可惜其他部分的回答带来了这么多的downvotes 🙁
无论如何,这里是我如何找出在我的情况下这个警告的原因是什么:
- 使用Chrome浏览器>点击F12将DevTools
- 打开抽屉菜单 (在右上方的Chrome 3垂直点中)
- 在控制台下 >检查日志XMLHttpRequests选项
- 重新加载你的错误页面,并观察控制台日志中每个ajax请求发生的情况。
在我的情况下,另外一个插件是在每个ajax调用之后加载2个.js库 ,这绝对不是必需的,也是不必要的。 禁用stream氓插件会从日志中删除警告。 从这一点,你可以尝试自己解决问题(例如,限制脚本加载到某些页面或事件 – 这是太特定的答案在这里)或联系第三方插件开发人员来解决它。
希望这有助于某人。
为避免此警告,请勿使用:
async: false
在任何$ .ajax()调用中。 这是XMLHttpRequest的唯一不赞成使用的function。
默认是
async: true
jQuery已弃用同步XMLHTTPRequest
在以下情况下我会得到这样的警告:
1)file1包含<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>
。 页面有input字段。 我在input字段中input一些值,然后单击button。 jquery发送input到外部的php文件。
2)外部php文件也包含jquery,并且在外部php文件中,我还包含了<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>
。 因为如果我得到警告。
从外部的php文件中删除<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>
,并且没有警告。
据我所知加载第一个文件(file1),我加载jquery-1.10.2.js
和页面不重新加载(它发送数据到外部的PHP文件使用jQuery $.post
),然后jquery-1.10.2.js
继续存在。 所以没有必要再次加载它。
我一直在回答所有令人印象深刻的答案。 我认为他应该提供给他一个问题的代码。 鉴于下面的例子,如果你有一个脚本链接到jquery page.php那么你会得到通知。
$().ready(function () { $.ajax({url: "page.php", type: 'GET', success: function (result) { $("#page").html(result); }}); });
当我在像“example.com/files/text.txt”这样的查询中设置url时,我得到了这个exception。 我改变了url为“ http://example.com/files/text.txt ”,这个例外消失。
我得到了另外一个can.js脚本的例外,例如,
{{>anotherScript}}
在MVC应用程序中,我得到了这个警告,因为我用一个返回View()的方法打开了一个Kendo窗口,而不是PartialView()。 View()试图再次检索页面的所有脚本。
ZF2发生在我身上。 我试图加载莫代尔的内容,但我忘了closures布局之前。
所以:
$viewModel = new ViewModel(); $viewModel->setTerminal(true); return $viewModel;
像@Nycen我也有这个错误,因为一个链接到Cloudfare。 我的是select2插件。
修复它我刚刚删除
src="ajax/libs/select2/4.0.0/js/select2.min.js"
错误消失了。
在我的情况下,这是由灵活脚本,这是由Cloudflare提供的“CDNJSselect”应用程序的一部分引起的。
根据Cloudflare的说法,“这个应用程序在2015年3月被弃用”。 我把它关掉了,消息立刻消失了。
您可以通过访问https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com访问这些应用程序;
注意:这是我对这个线程的一个副本同步XMLHttpRequest警告和<script> (我在寻找解决scheme时都访问过)
我用下面的步骤解决这个问题:
- 检查您的CDN脚本并将其添加到本地。
- 将脚本移动到标题部分。
- 在Chrome中,
press F12
- 开发工具 – >按
F1
。 - 请参阅settings-> general-> Apperance:
"Don't show chrome Data Saver warning"
– 设置此checkbox。 - 请参阅设置 – >一般 – >控制台:
"Log XMLHTTPRequest"
– 也设置此checkbox。
请享用
在我的特殊情况下,我渲染了一个Rails部分,没有render layout: false
,它重新渲染了整个布局,包括<head>
标记中的所有脚本。 向控制器操作添加render layout: false
可解决问题。