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示例的直接副本,但是当以这种方式加载脚本时,我看不到任何警告。

http://jsfiddle.net/49tkL0qd/

警告消息可能是由于主线程中的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插件。

文档:
http://api.jquery.com/jquery.holdready

实际上@Webgr的部分答案帮助我debugging了这个警告@控制台日志,可惜其他部分的回答带来了这么多的downvotes 🙁

无论如何,这里是我如何找出在我的情况下这个警告的原因是什么:

  1. 使用Chrome浏览器>点击F12将DevTools
  2. 打开抽屉菜单 (在右上方的Chrome 3垂直点中)
  3. 控制台下 >检查日志XMLHttpRequests选项
  4. 重新加载你的错误页面,并观察控制台日志中每个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时都访问过)

我用下面的步骤解决这个问题:

  1. 检查您的CDN脚本并将其添加到本地。
  2. 将脚本移动到标题部分。
  1. 在Chrome中, press F12
  2. 开发工具 – >按F1
  3. 请参阅settings-> general-> Apperance: "Don't show chrome Data Saver warning" – 设置此checkbox。
  4. 请参阅设置 – >一般 – >控制台: "Log XMLHTTPRequest" – 也设置此checkbox。

请享用

在我的特殊情况下,我渲染了一个Rails部分,没有render layout: false ,它重新渲染了整个布局,包括<head>标记中的所有脚本。 向控制器操作添加render layout: false可解决问题。