28

ユーザーがページを離れるとフォームデータが失われることをユーザーに警告するフォームのフェイルセーフを構築しています (gmail と同様)。

window.onbeforeunload = function () {    
        if (formIsDirty) {
            return "You have unsaved data on this form. Don't leave!";
        }
}

上記の関数は Firefox でうまく機能しますが、IE では、他のページではなく javascript へのリンクであっても、任意の href リンクによってトリガーされます。

例えば....

<a href='javascript:someFunction();'>click</a>

ボタンをクリックするだけでページを離れているとユーザーに思わせたくないので、これを回避する方法があるかどうか疑問に思っています。さまざまなリンクが組み込まれており、多数あるため、すべてのリンクを書き直すオプションはありません。

何か案は？

4

6 に答える 6

37

これらのリンクにカーソルを合わせると、onbeforeunload を削除して再割り当てできます。

jQuery(
  function($)
  {
      //store onbeforeunload for later use
    $(window).data('beforeunload',window.onbeforeunload);  

      //remove||re-assign onbeforeunload on hover 
    $('a[href^="javascript:"]')
      .hover( 
             function(){window.onbeforeunload=null;},
             function(){window.onbeforeunload=$(window).data('beforeunload');}
            );

  }
);
于 2011-10-04T17:34:19.767 に答える
8

私はちょうど同様の問題に遭遇し、非常に簡単な解決策を見つけました:

$("a").mousedown(function() {
    $(window).unbind();
});

これにより、クリック イベントがトリガーされる直前に onbeforeunload イベントが削除されます。

于 2013-03-03T19:11:02.973 に答える
3

click代わりに、JavaScript を使用しないユーザー向けのフォールバック ページを使用して、スクリプトをイベント ハンドラーに移動します。

<a href="foo.html" onclick="someFunction(); return false">click</a>

目立たない JS チャンピオンはおそらくonclick属性の使用に反対するでしょうが、実際にはそれが機能し、イベント ハンドラーを追加する最も簡単な方法であり、例を提供する最も簡単な方法です。onclick懸念事項をより適切に分離するには、代わりに DOM0プロパティaddEventListener()またはライブラリを使用できますattachEvent()。

于 2011-10-04T15:15:11.557 に答える
1

(Like some of the other answers, this requires changing how the JavaScript is bound. If that doesn't work for you, disregard.)

I found that in IE 7 through IE 10, simply using jQuery .click() with preventDefault works without showing the onbeforeunload message (IE 11 does not show the beforeunload message for any of my test cases). This is true whether the href is '#' or javascript:void(0). I expect the conclusion holds if attachEvent/addEventListener is used directly, but I didn't test that.

There is a demo of the below at http://jsbin.com/tatufehe/1 . Both of the versions (in green) with preventDefault work (don't show the beforeunload dialog). The one without preventDefault does show it (as a comparison).

$( document ).ready( function () {
  $( 'a' ).click( function ( evt ) {
    $( '#display' ).text( 'You clicked: ' + $( this ).text() );

    if ( $(this).hasClass( 'withPreventDefault' ) ) {
      evt.preventDefault();
    }
  } );
})

window.onbeforeunload = function () {
  return "Are you sure you want to leave?";   
};

<p id="display"></p>

<p><a class="withPreventDefault" href="#">Number sign link *with* preventDefault</a></p>

<p><a class="withPreventDefault" href="javascript:void(0);">JavaScript href link *with* preventDefault</a></p>

<p><a href="javascript:void(0);">JavaScript href link *without* preventDefault</a></p>
于 2014-06-12T21:55:02.533 に答える
0

ユーザーのマウスがリンク上にあり、キーボードでページの更新をトリガーしたり、キーボードでリンクをアクティブにしたりした場合、プロンプトは表示されません。したがって、Dr.Molle のアプローチは、このまれなケースでは機能しません。

于 2013-04-11T17:46:47.460 に答える