web-dev-qa-db-ja.com

AJAX呼び出しを行うときにwindow.onbeforeunloadが呼び出されないようにすることはできますか？

AJAXベースのグリッドコントロールがあります。

Window.onbeforeunloadイベントにフックして、保存されていないデータがあるかどうかを確認し、保存されている場合は、「移動してもよろしいですか...保存されていないデータがあります...」というメッセージを表示します。

これはすべて良いです。

ただし、AJAX呼び出しはwindow.onbeforeunloadもトリガーするため、グリッドに未保存のデータがあり、AJAX呼び出し（別のグリッドの行を削除するなど）を行う場合）ユーザーに「ナビゲートしてもよろしいですか...データが保存されていません...」というメッセージが表示されますが、これは適切ではありません。

AJAX呼び出しのonbeforeunloadイベントを抑制することは可能ですか？または、呼び出しを検出することは可能ですかis an AJAX call ？そうでなければ、ハッキングする必要があります！

ありがとう

javascriptajaxonbeforeunload
22
Paul

ハイパーリンクでポストバックをトリガーする場合は、簡単な回避策があります。

<a href="javascript:submitFunction();">Submit</a>

または

<a href="javascript:;" onclick="submitFunction();">Submit</a>

このコードを使用するだけです：

<a href="#" onclick="submitFunction();">Submit</a>

ハイパーリンクのhref属性のコンテンツが現在のページ（シャープな文字が示す）でない場合、IEはonbeforeunloadイベントを発生させるようです）。

30
cygro

私はこのようなことをしました：

ボディタグの内側：

  var allowConfirm = true;

  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if(allowConfirm)
        return "Are you sure you want to navigate away from this page?";
    else
        allowConfirm = true;
  }

ログアウトするときは、次のスクリプトを呼び出します。

allowConfirm = false; window.location.hrefを返します。

5
Arpit

IE6またはhrefの場合、ポストバック機能をフックできます。つまり、ポストバック関数がWebForm_DoPostBackWithOptionsで、Jqueryを使用している場合は、以下のコードを上記のコードに追加します

var DoPostBackWithOptionsHook = null;

$(document).ready(function(){
  DoPostBackWithOptionsHook = WebForm_DoPostBackWithOptions;
  WebForm_DoPostBackWithOptions = WebForm_DoPostBackWithOptionsHook;
}

function WebForm_DoPostBackWithOptionsHook(options) {
    var navigateAwayFlag = $("input[id*='navigateAwayValue']");
       if (navigateAwayFlag.length > 0) {
           navigateAwayFlag[0].value = "false"; }

    return DoPostBackWithOptionsHook(options)
}
2
Manuel Parma

これは本当に奇妙です、あなたのAjax呼び出しが新しいリンクをロードしていないことを確認しますか？

この関連する仕様を必ずお読みください： onbeforeunload spec

Ajax呼び出しがTo invokeテーブルにリストされているアクションのいずれかをトリガーする可能性があるかどうかを確認します。

2
Luca Matteis

これは実際に機能します：

 OnClientClick="eval(this.href);return false"
0
Shawn

それは不可能です。ブラウザの更新ボタンが押されたかどうかを確認する方法はありません。

0
Ngalam City

AJAXを使用していませんが、変更が保存されていないページが残るのを防ぎたいと考えていました。私はnavigateAwayを含む以前の提案のほとんどを試しました。それらのどれもIE 8で動作しませんでした。NavigateAwayは常に長さ0を返しました。

タグのIDとしてクラスを使用し、それに基づいてブール値を設定することについての解決策があるブログを見つけました。私はそれを試しましたが、HTMLを出力するときに.NETが入力タグをクラスが宣言されたスパンタグでラップしていたため、機能しません。私の最終的な解決策は、タグのID名にWordIgnoreを入れることでした。また、ブール値を設定するコードによってクリックがトラップされる前にonbeforeunloadが呼び出されないようにするには、asp：Buttonやasp：Inputなどを使用する必要があります。最後に、aspは（VS IDEは）開始名をコントロールのタイプに強制します; ID = "Button_Save"。asp：タグを使用すると、onbeforeunloadが2回呼び出されるのを防ぐこともできます。

<script type="text/javascript" language="javascript">
 var stuffchanged = false
 var ignorenavigate = false

  $(document).ready(function () {


    //Detect whether the event source has "nonavigate" class specified
    $("a,input,img,checkbox,button").click(function () {
        var str = $(this).attr("ID");
        ignorenavigate = str.search("Ignore") > 0;
    });

});

window.onbeforeunload = confirmExit;
function confirmExit() {
    if (stuffchanged && !ignorenavigate) {
        return "You have attempted to leave this page with unsaved changes.  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?";
    }  

}

  function textchanged() {
     stuffchanged = true;
  }
0
Jon Reedholm

ASP.NET AJAX部分的なポストバックについて話している場合は、今日もこの動作に遭遇し、まったく同じことを行っています（そうでない場合は、私の投稿を完全に無視してください）。

これまでの私の経験では、部分的なポストバックがinputによってトリガーされた場合、アンロード前に起動しないようです部分的なポストバック中ですが、部分的なポストバックがhyperlinkによってトリガーされると、トリガーされます。アンカータグ内の何かをクリックすると、ブラウザはナビゲートしていると想定しているようです（IEおよびFireFoxでのみテストされていますが、そうです）。

ページに特定の非表示フィールドがあるかどうかは、ナビゲートアウェイ警告を表示するのが適切なときにクライアント側を判断するためにすでに使用していたので、非表示フィールドの値のチェックをに追加するだけでこれを修正できました。 onbeforeunloadのif条件、およびPageRequestManagerのBeginRequestハンドラーとEndRequestハンドラーにフックして値を設定します。これにより、部分的なポストバック中の警告が事実上無効になります。確認したいより具体的な事項がある場合は、ここにさらに複雑なロジックを追加できます。

これは非常に単純化されたコードサンプルです。 （私がそれが機能しないところまでペアリングして検閲した場合は申し訳ありませんが、それはあなたにアイデアを与えるはずです。）

window.onbeforeunload = checkNavigateAway;

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(onBeginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);

function onBeginRequest(sender, args) {
    var navigateAwayFlag = $("input[id*='navigateAwayValue']");
    if (navigateAwayFlag.length > 0) {
        navigateAwayFlag[0].value = "false";
    }
}

function onEndRequest(sender, args) {
    var navigateAwayFlag = $("input[id*='navigateAwayValue']");
    if (navigateAwayFlag.length > 0) {
        navigateAwayFlag[0].value = "true";
    }
}

function checkNavigateAway() {
    var navigateAwayFlag = $("input[id*='navigateAwayValue']");
    if (navigateAwayFlag.length > 0 && navigateAwayFlag[0].value == "true")
    {
        return "Warning Text";
    }
}

編集：悪いニュース。上記はIE6では機能しないようです。 Firefoxとは異なる順序でイベントを発生させるように思われるため、onbeforeunloadはAJAX beginRequest ...の前に発生します。ハイパーリンクをクリックする前に、フラグの値を変更する方法を見つける必要がある場合があります。 onbeforeunloadが発生します。

0
Grank

この問題の回避策の1つは、jqueryを使用してハイパーリンクタグのクリックイベントでsubmitFunction（）を呼び出し、ハイパーリンクからhref属性を削除することです。

0
Himanshu Saraswat