JavaScript console.log导致错误:"主线程上的同步XMLHttpRequest已弃用..."

Question

我一直在向控制台添加日志,以便在不使用Firefox调试器的情况下检查不同变量的状态.

但是,在我console.log在我的main.js文件中添加一个的许多地方,我收到以下错误而不是我可爱的小手写消息给自己:

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用.如需更多帮助http://xhr.spec.whatwg.org/

我console.log可以添加到我的代码使用的替代品或包装器,这不会导致此错误？

我做错了吗？

Answer 1

当我懒惰并且包含脚本标记作为正在返回的内容的一部分时,这发生在我身上.因此:

部分HTML内容:

<div> 
 SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

至少在我的情况下,似乎如果你通过xhr返回HTML内容,你将导致jQuery调用来获取该脚本.该调用发生在async标志为false,因为它假定您需要脚本继续加载.

在这样的情况下,通过查看某种类型的绑定框架并返回一个JSON对象,或者根据您的后端和模板,您可以更好地改变加载脚本的方式.

您还可以使用jQuerygetScript()来获取相关脚本.这是一个小提琴,它只是jQuery示例的直接副本,但是当脚本以这种方式加载时,我没有看到任何警告.

例

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

Answer 2

警告消息可能是由主线程中的XMLHttpRequest请求引起的,异步标志设置为false.

https://xhr.spec.whatwg.org/#synchronous-flag:

工作人员之外的同步XMLHttpRequest正在从Web平台中删除,因为它对最终用户的体验有不利影响.(这是一个需要很多年的漫长过程.)当JavaScript全局环境是文档环境时,开发人员不得为async参数传递false.强烈建议用户代理在开发人员工具中警告这种用法,并尝试在发生时抛出InvalidAccessError异常.

未来的方向是仅允许工作线程中的XMLHttpRequests.该消息旨在警告该效果.

Answer 3

我也面临同样的问题,但能够通过输入async来修复它:true.我知道它默认为true但是当我明确地写它时它会起作用

$.ajax({
   async: true,   // this will solve the problem
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});

Answer 4

Visual Studio 2015/2017的实时调试器是注入包含已弃用调用的代码.

Answer 5

有时需要ajax加载脚本,但延迟文档就绪,直到加载脚本.

jQuery支持这个holdReady()功能.

用法示例:

$.holdReady(true);                              //set hold
function releaseHold() { $.holdReady(false); }  //callback to release hold
$.getScript('script.js', releaseHold);          //load script then release hold

实际的脚本加载是异步的(没有错误),但如果其余的JavaScript在文档就绪后运行,则效果是同步的.

这个高级功能通常由动态脚本加载器使用,它希望在允许就绪事件发生之前加载其他JavaScript(如jQuery插件),即使DOM可能已准备就绪.

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

更新2019年1月7日

来自JQMIGRATE:

不推荐使用jQuery.holdReady()

原因:该jQuery.holdReady()方法因其对页面全局性能的不利影响而被弃用.此方法可以防止页面上的所有代码初始化延长的时间长度.

解决方案:重写页面,使其不需要延迟所有jQuery就绪处理程序.例如,这可以通过在运行安全时仅延迟加载需要延迟的代码来实现.由于此方法的复杂性,jQuery Migrate不会尝试填充该功能.如果与jQuery Migrate一起使用的jQuery的基础版本不再包含jQuery.holdReady()代码,则在出现此警告后不久将失败.

Answer 6

要避免此警告,请不要使用:

async: false

在任何$ .ajax()调用中.这是不推荐使用的XMLHttpRequest的唯一功能.

默认是

async: true

jQuery已弃用同步XMLHTTPRequest

Answer 7

@Webgr部分答案实际上帮我调试了这个警告@ console log,羞辱那个答案的另一部分带来了这么多downvotes :(

无论如何,这是我如何在我的案例中找出这个警告的原因:

1. 使用Chrome浏览器>点按F12即可启用DevTools
2. 打开抽屉菜单(在右上角的Chrome 3垂直点中)
3. 在" 控制台" >"检查日志XMLHttpRequests"选项下
4. 重新加载导致错误的页面,并观察控制台日志中每个ajax请求发生的情况.

在我的情况下,另一个插件在每次ajax调用后加载2个.js库,这绝对不是必需的也不是必需的.禁用流氓插件会从日志中删除警告.从那时起,您可以尝试自己解决问题(例如,限制脚本加载到某些页面或事件 - 这对于答案来说太具体了)或联系第三方插件开发人员来解决它.

希望这有助于某人.

Answer 8

我一直在寻找令人印象深刻的答案.我认为他应该提供给他一个问题的代码.鉴于下面的示例,如果您有一个脚本链接到page.php中的jquery,那么您会收到通知.

$().ready(function () {
    $.ajax({url: "page.php",
        type: 'GET',
        success: function (result) {
        $("#page").html(result);
   }});
 });

Answer 9

我在以下情况下得到了这样的警告:

1)包含的file1 <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>.页面有输入字段.我在输入字段中输入一些值,然后单击按钮.Jquery将输入发送到外部php文件.

2)外部php文件还包含jquery和外部php文件我也包含在内<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>.因为如果我得到警告.

<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>从外部php文件中删除并在没有警告的情况下工作.

据我所知,在加载第一个文件(file1)时,我加载jquery-1.10.2.js并且由于页面没有重新加载(它使用jquery将数据发送到外部php文件$.post),然后jquery-1.10.2.js继续存在.所以不必再次加载它.

Answer 10

当我在“ example.com/files/text.txt”之类的查询中设置网址时，出现了此异常。我已经将网址更改为“ http://example.com/files/text.txt ”，并且此异常消失了。

Answer 11

我因为在一个can.js脚本中包含另一个脚本而感到异常，例如，

{{>anotherScript}}

Answer 12

在MVC应用程序中，收到此警告，是因为我正在使用返回View（）而不是PartialView（）的方法打开Kendo窗口。View（）试图再次检索该页面的所有脚本。

Answer 13

ZF2中发生了这件事。我试图加载Modal内容，但之前忘记禁用布局。

所以：

$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;

Answer 14

像@Nycen一样，由于指向Cloudfare的链接，我也遇到了此错误。我的是Select2插件。

修复它我刚刚删除

 src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"

错误消失了。

Answer 15

1. 在 Chrome 中， press F12
2. 开发工具-> 按F1。
3. 请参阅设置"Don't show chrome Data Saver warning"- >常规- >外观：-设置此复选框。
4. 请参阅设置->常规->控制台："Log XMLHTTPRequest"-也设置此复选框。

享受

Answer 16

就我而言，这已解决。

JS

$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
    options.async = true;
});

此答案已插入此链接

/sf/ask/1982584551/