web-dev-qa-db-ja.com

JavaScript console.logにより、「メインスレッド上の同期XMLHttpRequestは推奨されません...」というエラーが発生します。

Firefoxデバッガを使わずにコンソールにログを追加してさまざまな変数のステータスをチェックしています。 

しかし、console.logファイルにmain.jsを追加した多くの場所で、私は自分の素敵な小さな手書きのメッセージの代わりに次のエラーを受け取ります。 

メインスレッド上の同期XMLHttpRequestは、エンドユーザーのエクスペリエンスに悪影響を与えるため、推奨されません。より多くの助けのために http://xhr.spec.whatwg.org/ /

このエラーの原因とならない、console.logの代替手段またはラッパーのコード用途に追加できますか。 

私は「それを間違ってやっている」のか？ 

jquerydebuggingfirefoxbackbone.jsconsole.log
337
Nathan Basanese

これは私が怠惰で、返されているコンテンツの一部としてscriptタグを含んでいたときに起こりました。など：

部分的な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/ /

254
kroolk

警告メッセージは、非同期フラグがfalseに設定されているメインスレッド内のXMLHttpRequest要求が原因である可能性があります。

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

ワーカーの外部にある同期XMLHttpRequestは、エンドユーザーのエクスペリエンスに有害な影響を与えるため、Webプラットフォームから削除される過程にあります。 JavaScriptグローバル環境がドキュメント環境である場合、開発者はasync引数にfalseを渡さないでください。ユーザエージェントは開発者ツールでのそのような使用法について警告することを強く推奨されており、が発生したときにInvalidAccessError例外をスローすることを試すことができます。

今後の方向は、ワーカースレッドでXMLHttpRequestsのみを許可することです。このメッセージはそのことを警告するものです。

67
PedanticDan

私も同じ問題に直面していましたが、async：trueを設定することでそれを修正することができました。私はそれがデフォルトで真実であることを知っています、しかし私がそれを明示的に書くときそれは働きます

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

Visual Studio 2015/2017のライブデバッガーは、廃止予定の呼び出しを含むコードを注入しています。

28
Charlie

スクリプトをajaxでロードする必要があるが、スクリプトがロードされるまでdocument readyを遅らせる必要がある場合があります。

jQueryはこれをholdReady()関数でサポートしています。

使用例：

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

実際のスクリプトの読み込みは非同期（エラーなし））ですが、JavaScriptの残りの部分がdocument readyの後に実行された場合、効果は同期的になります。

このadvanced featureは通常、readyイベントが発生するのを許可する前にjQueryプラグインなどの追加のJavaScriptをロードしたい動的スクリプトローダーによって使用されます。準備ができている。

ドキュメンテーション：
https://api.jquery.com/jquery.holdready

アップデート2019年1月7日

_ jqmigrate _ ：から

jQuery.holdReady（）は廃止予定です）

原因：ページの全体的なパフォーマンスに悪影響を及ぼすため、jQuery.holdReady()メソッドは推奨されていません。このメソッドは、ページ上のすべてのコードが長時間にわたって初期化されるのを防ぐことができます。

解決策：すべてのjQuery対応ハンドラーを遅延させる必要がないようにページを書き直してください。これは、安全に実行できる場合に遅延を必要とするコードのみを遅延ロードすることなどによって実現できます。 jQuery Migrateで使用される基本バージョンのjQueryにjQuery.holdReady()が含まれていない場合は、この警告が表示された直後にコードが失敗します。

15
Dem Pilafian

この警告を回避するために、使用しないでください。

async: false

$ .ajax（）呼び出しのいずれかで。これはXMLHttpRequestの唯一の非推奨機能です。

デフォルトは 

async: true

jQueryは同期XMLHTTPRequestを非推奨にしました

13
Sonu K

@Webgrの部分的な答えは実際に私がこの警告@コンソールログをデバッグするのを助けました、その答えの他の部分が非常に多くの投票をもたらしました:(

とにかく、ここに私が私の場合この警告の原因が何であるか見つけた方法はあります：

  1. Chromeブラウザ> F12を押してDevToolsを起動してください。
  2. 引き出しメニューを開きます （Chrome 3の場合は右上の縦の点）
  3. Console > check Log XMLHttpRequests optionの下に
  4. エラーが発生しているページを再読み込みして、コンソールログで各ajaxリクエストで何が起こるかを確認してください。

私の場合、別のプラグインが2 .jsライブラリ を各ajax呼び出しの後にロードしていましたが、これは絶対に必要でも必要でもありませんでした。不正プラグインを無効にすると、ログから警告が削除されました。その時点から、自分で問題を解決するか（スクリプトの読み込みを特定のページまたはイベントに制限する - これはここでの回答には特定すぎる方法です）、解決するためにサードパーティのプラグイン開発者に連絡します。

これが誰かに役立つことを願っています。

11
dev101

私はすべての印象的な答えを見てきました。私は彼が彼に問題を与えているコードを提供するべきだと思います。以下の例で、page.phpのjqueryにリンクするスクリプトがあるとしたら、それがわかります。 

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

次の場合にこのような警告が表示されます。

1）<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>を含むfile1。ページには入力フィールドがあります。入力フィールドに値を入力し、ボタンをクリックします。 Jqueryは、外部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をロードし、ページがリロードしない（jquery $.postを使用して外部phpファイルにデータを送信する）ので、jquery-1.10.2.jsを続行します存在する。そのため、再度ロードする必要はありません。

6
Andris
  1. Chromeでは、press F12
  2. 開発ツール - > F1を押します。
  3. 設定 - >一般 - >外観："Don't show chrome Data Saver warning"-を参照してください。
  4. 設定 - >一般 - >コンソール："Log XMLHTTPRequest" - このチェックボックスも設定してください。

楽しい

4
Webgr

MVCアプリケーションでは、PartialView（）ではなくView（）を返すメソッドでKendo Windowを開いていたため、この警告が表示されました。 View（）がページのすべてのスクリプトを再試行しようとしていました。 

4
Misi

そして、私はこの例外を得ました。

{{>anotherScript}}
4
Charles Merriam

"example.com/files/text.txt"のようにクエリにURLを設定すると、この例外が発生しました。 IveはURLを " http://example.com/files/text.txt "に変更しましたが、この例外は消えました。

4
Radren

@Nycenのように私もCloudflareへのリンクのためにこのエラーを得ました。私のものは Select2 /プラグイン用でした。

それを修正するために、私はちょうど取り除きました

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

そしてエラーは消えました。

4
Rockwell Rice

私はモーダルコンテンツを読み込もうとしていましたが、以前はレイアウトを無効にするのを忘れていました。

そう：

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

私の場合、これは Cloudflare が提供する "CDNJS Selections"アプリの一部である flexie スクリプトによって引き起こされました。

Cloudflareによると、「このアプリは2015年3月に廃止予定です」。私はそれを消して、メッセージは即座に消えました。

あなたは/を訪問することによってアプリにアクセスすることができます https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

注意：これは、このスレッドに対する私の答えのコピーです。 同期XMLHttpRequestの警告と<スクリプト> （解決策を探すときに両方を訪問しました）

3
Nycen

これは私の場合は解決しました。

JS

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

この回答はこのリンクに挿入されています

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

3
Bagrat Zakaryan

私は以下の手順でこれを修正しました：

  1. CDNスクリプトを確認してローカルに追加してください。
  2. スクリプトインクルードをヘッダーセクションに移動します。
2
mzonerz

私にとって問題は、OKリクエストでは、ajaxレスポンスがテーブルなどの整形式のHTML文字列であることを期待していたことですが、この場合、サーバーはリクエストに問題を抱えてエラーページにリダイレクトしました。それでエラーページのHTMLコード（どこかに<scriptタグがありました。私はコンソールにajaxレスポンスを記録しました。それが私が期待していたものではないことに気付いたのです）。

2
gthuo

私の特定のケースでは、render layout: falseタグのすべてのスクリプトを含めて、レイアウト全体を再レンダリングしていた<head>なしでRailsパーシャルをレンダリングしました。コントローラのアクションにrender layout: falseを追加することで問題は解決しました。

2
dps

2014年に提起された質問は2019年なので、もっと良い選択肢を探すのは良いことだと思います。

Javascriptでfetch apiを使用すると、より柔軟になります。

例えば、このコードを見てください

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