この JavaScript イベントはまもなく非推奨になることに注意してください。

簡単に言うと、Chrome 117からunloadイベントは段階的に非推奨になります。

通常、このイベントはHTML、ドキュメントがアンロードされようとしているときに呼び出されますunload。理論的には、ユーザーがページから移動したときにコードを実行したり、セッションの終了時にコードを実行するセッションコールバックとして使用したりできます。

<!doctype html>
<html>
  <head>
    <title>Parent Frame</title>
    <script>
      window.addEventListener("beforeunload", function (event) {
    
    
        console.log("即将卸载");
      });
      window.addEventListener("unload", function (event) {
    
    
        console.log("卸载");
      });
    </script>
  </head>
  <body>
      ConardLi ...
  </body>
</html>

一般に、次のシナリオで使用します。

ユーザーデータの保存: ページを離れる前にデータを保存します。
クリーンアップタスクを実行します。ページを離れる前に、開いているリソースを閉じます。
分析の送信: ページを離れるときのユーザーインタラクションに関連するデータを送信します。

なぜ廃止するのか

このunloadイベントは非常に信頼性が低いです。このコードは、多くのブラウザーでは期待どおりに動作しません。

また、（ブラウザの順方向、逆方向、キャッシュ操作）よりも早いためbfcache、通常の動作を妨げ、bfcacheWebサイトのパフォーマンスに悪影響を及ぼします（通常、仕様上、unloadユーザーのbfcache操作を妨げることはありません）。これは歴史的な問題であり、実際、Safari はずっと前にこの問題を非推奨にしています。

代替案は何ですか

1 つ目の代替方法は、visibilitychangeユーザーがタブを切り替えたとき、ブラウザウィンドウを最小化したとき、または新しいページを開いたときにこのイベントを発生させることです。ページが表示されていないときに何らかの操作を行う必要がある場合、このドキュメントvisibilityStateかどうかを判断できますhidden。

document.addEventListener('visibilitychange', function() {
    
    
  if (document.visibilityState === 'visible') {
    
    
    // 页面变为可见状态时的操作
    console.log('页面可见');
  } else if (document.visibilityState === 'hidden') {
    
    
    // 页面变为不可见状态时的操作
    console.log('页面不可见');
  }
});

2 番目の代替イベントはpagehide、ユーザーが別のリンク、「進む」または「戻る」ボタンをクリックしたとき、またはブラウザーのタブを閉じたときに発生し、ユーザーがインターフェースを離れたときを決定するために使用することもできます。

window.addEventListener('pagehide', function(event) {
    
    
  console.log('页面即将隐藏或关闭');
  // 执行相应的操作
});

pagehideのような条件（ブラウザの順方向、逆方向、キャッシュ操作）をunload満たさなくなることはありません。bfcache

検出方法

Lighthouseno-unload-listenersページ上にイベントリスナーJavaScript(サードパーティライブラリからのイベントリスナーを含むJavaScript) が追加された場合にunload警告する専用の検出機能があります。

Chrome DevToolsページがバックフォワードキャッシュの対象となるのを妨げる可能性のある問題を特定するのに役立つ検出機能もback-foward-cacheあります。これにはunloadイベントの使用も含まれます。

アクセス許可ポリシーを使用して無効にする

Web サイトがこのイベントに役立つことはわかっているが、削除する方法がわからない場合は、を使用して Web サイトをPermissions-Policy制限できます。Chrome 115このバージョンでは、特にunload次の構成が追加されます。

iframe現在のページとそのすべての子のunloadイベントを再帰的に無効にするには、次のコードを追加しますHeader。

Permissions-Policy: unload=()

現在のページとそのすべての子のイベントを再帰的に無効にしますがiframe、unload一部を保持したい場合:

Permissions-Policy: unload=(https://www.conardli.com)

unloadWeb サイトに呼び出しイベントがあるかどうかだけを確認しますが、それを傍受しないでください。

Permissions-Policy-Report-Only: unload=()

やっと

参考：

https://developer.chrome.com/en/blog/deprecating-unload/
https://developer.mozilla.org/docs/Web/API/Window/unload_event
https://developer.chrome.com/blog/page-lifecycle-api/#the-unload-event
https://web.dev/bfcache/#never-use-the-unload-event
https://developer.chrome.com/blog/page-lifecycle-api/#event-visibilitychange
https://developer.chrome.com/blog/page-lifecycle-api/#event-pagehide
https://developer.chrome.com/docs/lighthouse/