58

次のコードを試して、ブラウザ ウィンドウを閉じたときにアラートを取得しました。

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?";
}

これは機能しますが、ページに 1 つのハイパーリンクが含まれている場合、そのハイパーリンクをクリックすると同じアラートが発生します。ハイパーリンクをクリックしたときではなく、ブラウザー ウィンドウを閉じたときにのみアラートを表示する必要があります。

4

4 に答える 4

51

別の実装は次のとおりです。この Web ページで見つけることができます: http://ujap.de/index.php/view/JavascriptCloseHook

<html>
  <head>
    <script type="text/javascript">
      var hook = true;
      window.onbeforeunload = function() {
        if (hook) {
          return "Did you save your stuff?"
        }
      }
      function unhook() {
        hook=false;
      }
    </script>
  </head>
  <body>
    <!-- this will ask for confirmation: -->
    <a href="http://google.com">external link</a>

    <!-- this will go without asking: -->
    <a href="anotherPage.html" onClick="unhook()">internal link, un-hooked</a>
  </body>
</html>

それは、変数をフラグとして使用することです。

于 2008-12-02T11:20:11.037 に答える
32

コードをそのままにして、jQuery を使用してリンクを処理します。

$(function () {
  $("a").click(function {
    window.onbeforeunload = null;
  });
});
于 2008-12-02T11:19:28.667 に答える
6

ハイパーリンクのクリックを検出できますが、ユーザーが次のことを行っているかどうかを判断することはできません。

  • ページを更新しようとしました。
  • ブラウザのタブを閉じようとしました。
  • ブラウザ ウィンドウを閉じようとしました。
  • URL バーに別の URL を入力し、Enter キーを押します。

これらのアクションはすべて でイベントを生成beforeunloadしますがwindow、イベントに関する正確な情報はありません。

上記のアクションを実行するときに確認ダイアログを表示し、ハイパーリンクがクリックされたときに表示しないようにするには、次の手順に従います。

  • 特定の変数 (フラグ) が に設定されていない限り、確認テキストを文字列として返すbeforeunloadイベント リスナーをに割り当てます。windowtrue
  • clickイベントを に割り当てdocumentます。a要素がクリックされたかどうかを確認します ( event.target.tagName)。はいの場合、フラグを に設定しtrueます。

submitイベント リスナーを に割り当てて、フォームの送信も処理する必要がありdocumentます。

コードは次のようになります。

let disableConfirmation = false;
window.addEventListener('beforeunload', event => {
  const confirmationText = 'Are you sure?';
  if (!disableConfirmation) {
    event.returnValue = confirmationText; // Gecko, Trident, Chrome 34+
    return confirmationText;              // Gecko, WebKit, Chrome <34
  } else {
    // Set flag back to false, just in case
    // user stops loading page after clicking a link.
    disableConfirmation = false;
  }
});
document.addEventListener('click', event => {
  if (event.target.tagName.toLowerCase() === 'a') {
    disableConfirmation = true;
  }
});
document.addEventListener('submit', event => {
  disableConfirmation = true;
});
<p><a href="https://stacksnippets.net/">google.com</a></p>
<form action="https://stacksnippets.net/"><button type="submit">Submit</button></form>
<p>Try clicking the link or the submit button. The confirmation dialog won't be displayed.</p>
<p>Try reloading the frame (right click -> "Reload frame" in Chrome). You will see a confirmation dialog.</p>

一部のブラウザーではリスナーで使用する必要があり、他のブラウザーではステートメントを使用することに注意しevent.returnValueてbeforeunloadくださいreturn。

beforeunloadイベント ドキュメントも参照してください。

于 2016-01-12T22:45:41.757 に答える