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

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

主线程上的同步XMLHttpRequest已弃用,因为它会对最终用户的体验产生不利影响。更多帮助http://xhr.spec.whatwg.org/

我可以在我的代码使用中添加哪些不会导致此错误的console.log替代品或包装器?

我“做错了”吗?


警告消息可能是由于主线程中的XMLHttpRequest请求将async标志设置为false。

https://xhr.spec.whatwg.org/ synchronous:

Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs.

未来的方向是只允许工作线程中的xmlhttprequest。这条消息意在发出这方面的警告。


这种情况发生在我很懒的时候,我将脚本标记作为返回内容的一部分。是这样的:

部分HTML内容:

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

至少在我的例子中,如果通过xhr返回这样的HTML内容,就会导致jQuery调用该脚本。该调用带有一个async标志false,因为它假定您需要继续加载脚本。

在这种情况下,最好查看某种类型的绑定框架并返回一个JSON对象,或者根据后端和模板更改加载脚本的方式。

你也可以使用jQuery的getScript()来获取相关的脚本。这是一个小提琴,这只是一个直接复制的jQuery示例,但我没有看到任何警告抛出时,脚本加载的方式。

例子

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

http://jsfiddle.net/49tkL0qd/


我也面临着同样的问题,但能够通过放置async: true来修复它。我知道它默认为true,但当我显式地写它时,它是有效的

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

我得到这个异常时,我设置url在查询像“example.com/files/text.txt”。我把url改为“http://example.com/files/text.txt”,这个异常消失了。


在我的情况下,这是由Cloudflare提供的“CDNJS选择”应用程序中的灵活脚本引起的。

根据Cloudflare的说法,“该应用程序已于2015年3月弃用”。我把手机关掉,留言立刻就消失了。

您可以通过访问https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com访问这些应用程序

注意:这是我在这个线程上的答案的副本同步XMLHttpRequest警告和<脚本>(我在寻找解决方案时访问了这两个)


我得到了这个例外,包括一个can.js脚本在另一个,例如,

{{>anotherScript}}

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

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

2)外部PHP文件也包含jquery,在外部PHP文件中我还包括<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. js。因为如果这样我就会收到警告。

从外部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继续存在。所以不需要再加载了。


在MVC应用程序中,我得到了这个警告,因为我用一个返回View()而不是PartialView()的方法打开了一个Kendo窗口。View()试图再次检索页面的所有脚本。


我在《ZF2》里也遇到过。 我试图加载模式内容,但我忘记禁用布局之前。

So:

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

有时候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() is deprecated Cause: The jQuery.holdReady() method has been deprecated due to its detrimental effect on the global performance of the page. This method can prevent all the code on the page from initializing for extended lengths of time. Solution: Rewrite the page so that it does not require all jQuery ready handlers to be delayed. This might be accomplished, for example, by late-loading only the code that requires the delay when it is safe to run. Due to the complexity of this method, jQuery Migrate does not attempt to fill the functionality. If the underlying version of jQuery used with jQuery Migrate no longer contains jQuery.holdReady() the code will fail shortly after this warning appears.


我一直在看答案,都令人印象深刻。我认为他应该提供给他一个问题的代码。给出下面的例子,如果你在page.php中有一个链接到jquery的脚本,你就会得到通知。

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

我用以下步骤来解决这个问题:

检查您的CDN脚本并在本地添加它们。 将脚本包含移动到标题部分。


像@Nycen一样,我也得到了这个错误,因为一个链接到Cloudfare。我的是Select2插件。

我刚把它拆了

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

错误消失了。


在Chrome浏览器中,按“F12” 开发工具->按F1。 参见设置->通用->外观:“不显示chrome数据保护警告”-设置此复选框。 参见设置->general->Console:“Log XMLHTTPRequest”-设置此复选框。

享受


@ webgr部分回答实际上帮助我调试了这个警告@控制台日志,遗憾的是,答案的另一部分带来了这么多的反对票:(

不管怎样,下面是我发现这个警告的原因:

使用Chrome浏览器>按F12打开DevTools 打开抽屉菜单(在Chrome 3中右上角的垂直点) 在控制台>下检查Log XMLHttpRequests选项 重新加载给您错误的页面,并观察控制台日志中的每个ajax请求发生了什么。

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

希望这能帮助到一些人。


Visual Studio 2015/2017的实时调试器正在注入包含弃用调用的代码。


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

async: false

在任何$.ajax()调用中。这是XMLHttpRequest唯一被弃用的特性。

默认为

async: true

jQuery已经弃用了同步XMLHTTPRequest


在我的特殊情况下,我呈现了一个没有渲染布局的Rails部分:false,这是重新渲染整个布局,包括<head>标记中的所有脚本。添加渲染布局:false控制器动作修复了这个问题。


这个问题在我的案例中得到了解决。

JS

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

这个答案被插入到这个链接中

https://stackoverflow.com/questions/28322636/synchronous-xmlhttprequest-warning-and-script


对我来说,问题是在OK请求中,我期望ajax响应是一个格式良好的HTML字符串,如表格,但在这种情况下,服务器在请求中遇到了问题,重定向到错误页面,因此返回错误页面的HTML代码(在某处有一个<script标记)。我控制台记录了ajax响应,这时我意识到它不是我所期望的,然后继续进行调试。


这个问题是2014年提出的,现在是2019年,所以我想寻找更好的选择是件好事。

你可以简单地在Javascript中使用fetch api,它为你提供了更多的灵活性。

例如,请参阅此代码

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });

我发现这些问题导致早期重定向页面之前javascript完成,在我的情况下,firebase rtdb设置功能。