colorbox、modalなど別リソースの読み込みでSynchronous XMLHttpRequest on the main thread is deprecated が出る時の対処法

 

特に、colorboxやmodalで親画面から子画面を呼び出す場合に良く出るんですが、

Synchronous XMLHttpRequest on the main thread is deprecated
because of its detrimental effects to the end user's experience.

というエラーに遭遇することがあります。

これが出てしまう場合、原因はajaxで同期的にリモートのコンテンツを読み込んで書き換えようとしているからです。

なので、対処としては、ajax呼び出しを非同期呼び出しにすればいいので、下記サンプルのように、

function call_ajax() {
	console.log('call ajax');
	
	$.ajax({
		url:'/some.html',
		async:true,
		type:'GET',
	})
	
	// Ajaxリクエストが成功した時発動
	.done( (data) => {
		console.log('success');
	})
	// Ajaxリクエストが失敗した時発動
	.fail( (data) => {
		alert("Error: " + xhr.status + ": " + xhr.statusText);
	})
	// Ajaxリクエストが成功・失敗どちらでも発動
	.always( (data) => {
	
	});
                
}

「async:true」がajaxに渡るようにするとワーニングが出ないようになります。

 

上記の対処でも、どうしてもエラー出てしまう場合

まれに、上記の対応を行なっても、ワーニングが出続けてしまうことがあります。

そんなときは、そのajaxの関数の呼び出しの度に、ワーニングが出るか、注意深く見てみましょう。

初回の呼び出しのときにしかワーニングが表示されない場合は、以下の可能性も疑ってみると良いと思います。

ajax呼び出しで、別ページののコンテンツを呼び出している場合、そのページ上部でjavascriptのファイル(jsファイル)を読み込んでいないかを確認しましょう。

その場合、ページ読み込み時に、そのjsファイルを同期的にロードするため、当該エラーが表示されてしまうことがあります。

私は、結構これでハマリました。。。

お役に立てば幸いです。


コメントを残す

サブコンテンツ

このページの先頭へ