web-dev-qa-db-ja.com

インターセプトページ終了イベント

システム内のページを編集するときに、ユーザーが別のWebサイトに移動することを決定した場合、保存していないすべての編集内容が失われる可能性があります。

別のページに移動しようとする試みをインターセプトし、現在の作業を失う可能性があるため、ユーザーにこれが実行されることを確認するよう促します。

Gmailはこれを非常によく似た方法で行います。たとえば、新しい電子メールを作成し、メッセージ本文への入力を開始し、アドレスバーに新しい場所（Twitter.comなど）を入力します。 「本当によろしいですか？」というプロンプトが表示されます。

これを複製する方法のアイデア？ IE8をターゲットにしていますが、FFとChromeにも対応したいと考えています。

javascriptjavascript-eventsinternet-explorer
114
Chris Ballance

Ghommeyの答えに似ていますが、これはIEおよびFirefoxの古いバージョンもサポートしています。

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};
142
Eli Grey

こちらの記事をご覧ください。探している機能は onbeforeunload です

サンプルコード：

  <script language="JavaScript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
  }
</script>
23
jantimon

迷惑な確認ポップアップの代わりに、 出発を遅らせる 未保存のデータをサーバーに正常にポストするためのほんの少し（ミリ秒単位）を管理します。これは、次のようにダミーテキストをコンソールに書き込むことでサイトで管理しました。

window.onbeforeunload=function(e){
  // only take action (iterate) if my SCHEDULED_REQUEST object contains data        
  for (var key in SCHEDULED_REQUEST){   
    postRequest(SCHEDULED_REQUEST); // post and empty SCHEDULED_REQUEST object
    for (var i=0;i<1000;i++){
      // do something unnoticable but time consuming like writing a lot to console
      console.log('buying some time to finish saving data'); 
    };
    break;
  };
}; // no return string --> user will leave as normal but data is send to server

編集：Synchronous_AJAX および jquery でそれを行う方法も参照してください

6
Remi

すべての必要なデータを完了していないユーザーがいます。

<cfset unloadCheck=0>//a ColdFusion precheck in my page generation to see if unload check is needed
var erMsg="";
$(document).ready(function(){
<cfif q.myData eq "">
    <cfset unloadCheck=1>
    $("#myInput").change(function(){
        verify(); //function elsewhere that checks all fields and populates erMsg with error messages for any fail(s)
        if(erMsg=="") window.onbeforeunload = null; //all OK so let them pass
        else window.onbeforeunload = confirmExit(); //borrowed from Jantimon above;
    });
});
<cfif unloadCheck><!--- if any are outstanding, set the error message and the unload alert --->
    verify();
    window.onbeforeunload = confirmExit;
    function confirmExit() {return "Data is incomplete for this Case:"+erMsg;}
</cfif>
0
gordon