XHR / Ajaxリクエストを実行した後、ブラウザで新しいタブをクリックして開く必要がある状況があります。
これを行うには、Ajaxリクエストを同期的に実行して、信頼できるクリックイベントのコンテキストを維持するように設定します。これは、正常に機能します。
ただし、最新のChromeバージョン（36）では、Ajax呼び出しに多少の遅れがあるとポップアップ警告が表示されます... Chromeがタブを開く代わりにポップアップ警告を表示するには、2秒の遅れで十分です。コード自体は機能しています。そのボタンを複数回クリックすると、リクエストに遅延が発生するまで常に機能します。次に、ポップアップ警告が表示されます...
信頼できるイベントを引き続き利用できるようにするために終了する必要がある同期Ajaxリクエストに適用されるタイムアウトはありますか？
それを回避する方法はありますか？結局のところ、呼び出しはすでに同期されており、結果が到着するまで他のすべてをフリーズします。
ありがとう。
更新：問題を示すためにJSFiddleを作成しました：http：//jsfiddle.net/23JNw/9/
/**
* This method will give open the popup without a warning.
*/
function performSlowSyncronousRequest() {
$.ajax({
url: '/echo/html',
data: {delay: 2}, //JSfiddle will delay the answer by 2 seconds
success: function(){
window.open('http://www.thirtykingdoms.com'); //this causes the popup warning in Chrome
},
async: false
});
}
これを修正する可能性があるのは、XHRリクエストが返される前に、信頼できるコンテキストにいる間に新しいタブを開くことです。Javascriptを介して開かれたブラウザタブとウィンドウは、親ウィンドウとの接続を維持し、相互に通信できます。
リンクがクリックされたときに新しいタブを開くと、XHR呼び出しの実行中に新しいウィンドウにロード画面を表示できます。このワークフローは、元の要求ほどクリーンではありませんが、ある程度考えれば実行可能なソリューションになります。以下のスクリプトは、window.setTimeout（）を使用して非同期XHRリクエストをシミュレートする簡単な例です。
<html>
<body>
<h4>
Hello
</h4>
<a id="openWindow" href="">Make http call and open window.</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
(function ($) {
var newWindow = null,
timeout = null;
$(document).ready(function () {
$('#openWindow').on('click', function (evt) {
evt.preventDefault();
newWindow = window.open('about:blank', 'tempWindow');
$(newWindow.document).find('body').append('<div class="loading">Loading...</div>');
timeout = window.setTimeout(function () {
// simulates async XHR
$(newWindow.document).find('.loading').remove();
$(newWindow.document).find('body').append('Done loading, here\'s your data');
}, 5000)
});
});
}(jQuery));
</script>
</body>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加