前にajaxコールを送信するbeforeUnloadがブラウザによってキャンセルされました

私は、ユーザがサイトから離れてナビゲートするときに保存されていないユーザ入力データの保存（ajax呼び出し）を必要とするWebアプリケーションを持っています。前にajaxコールを送信するbeforeUnloadがブラウザによってキャンセルされました

私はbeforeunloadイベントリスナーでajax呼び出し（データの保存）を実行するために "Fetch"を使用しています。しかし、ブラウザはajax呼び出しをキャンセルしたようです（Chromeのネットワークパネルを見て、プリフライトオプション呼び出しがキャンセルされました）。

jqueryには、同期ajax呼び出しを送信する方法がありますが、廃止されました。また、回避策はbeforeUnloadイベントを介してユーザーがナビゲーションを確認できるようにブラウザの指示されたプロンプトメッセージをポップアップすることですが、それはビジネス要件によっては好まれません。

Ajaxコールを通過させるソリューションはありますか？

以下のコードサンプルです。：

出典

2017-01-07 Jane

重複？ [前のロードでajaxが確実に実行されますか？]（http://stackoverflow.com/q/30676368/218196） –

重複：[アンロード前に保存]（http://stackoverflow.com/questions/24324365/save-before-unload ） – RamblinRose

@RamblinRoseありがとう。あなたが紹介した投稿に基づいて実験しました。ユーザーがページにとどまることを選択した場合、セーブは "自動的に"行われる可能性があるため、setTimeoutを追加するとよいでしょう。 – Jane

window.addEventListener('beforeunload', beforeUnloadHandler); 
 

 
beforeUnloadHandler(event) { 
 
    fetch(url, { 
 
     method: 'PUT', 
 
     credentials: 'include', 
 
     headers: { 
 
     'Content-Type': 'application/json', 
 
     Authorization: api.AUTHORIZATION_HEADER 
 
     }, 
 
     body: JSON.stringify(data) 
 
    }) 
 
    }

は私が 非非同期としてAJAX呼び出しを設定するには、同様の問題に直面し、それは完全に働きました。あなたのAJAX呼び出しに以下のスニペットを追加

試してみてください。

$.ajaxSetup({ cache: false }) 
$.ajaxSetup({ async: false })

出典

2018-01-24 05:20:56 Maha

前にajaxコールを送信するbeforeUnloadがブラウザによってキャンセルされました

答えて

関連する問題