最新のchromeでページ遷移の際にunloadイベントを動作させる方法

前提・実現したいこと

古いchrome（バージョン67）で動作していたWEBアプリを最新のchrome（バージョン80）でも動作するように修正しています。
その際にunloadイベントが正常に動作しなくなっていたので、動作させる方法か別のイベントで対応する方法を知りたいです。

発生している問題・エラーメッセージ

あるhtmlでページを離れる前に処理を入れたいと考えています。
その処理をunloadイベント内に実装していましたが、ブラウザを閉じた時には動作するのですがリンクで別ページに遷移する時には動作しなくなっていました。
beforeunloadイベントも同時に実装しており、こちらは画面の内容を変更して保存していない際の警告を出すために使用していますので、閉じる前の処理を記述することは難しい状態です。こちらのイベントで必要な処理を実装するのであれば、「変更が保存されませんがよろしいですか？」のダイアログで「はい」を選択した場合だけ処理を実装しなければいけないのですが、そこに処理を実装する方法が無さそうなのです。

該当のソースコード

状況を分かりやすく説明するために、本来実装したい処理は除去しています。

■001.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テスト１</title>
</head>
<body>
  <h2>ただのテストページ</h2>
</body>
</html>

■002.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js "></script>
<script>
	$(function(){
		$(window).on('unload', function(event) {
			return;
		});
		$(window).on('beforeunload', function(event) {
			return;
		});
	});
</script>
  <title>テスト２</title>
</head>
<body>
<form method="post" action="foo.cgi">
<input type="text" value="" />
<input type="submit" value="送信" />
</form>
<a href="001.html">001</a>
</body>
</html>

試したこと

002.htmlを開き、001のリンクをクリックするとbeforeunloadイベントしか動きません。
002.htmlを開き、ブラウザを閉じるとbeforeunloadイベント⇒unloadイベントの順で動作しました。
いずれもF12で確認できる開発ツールのデバッグで止めて確認しました。

補足情報（FW/ツールのバージョンなど）

古いchromeのバージョン67
最新のchromeのバージョン80
jquery2.2.2

行動規範の内容に同意します

回答2件

ベストアンサー

breakpoint で止められないだけで一応動いているようです(console.log()出力が一瞬表示事される)。
ただし、unload は推奨されなくなっています。
何をしたいのか書かれていないのでわかりませんが、ページ遷移をとらえるなら navigator.sendBeacon() を、警告を出したいのであれば beforeunload にまとめるようにしましょう。

アンロード時にポップアップは許可されなくなっています。
https://developers.google.com/web/updates/2018/12/chrome-72-deps-rems#dont_allow_popups_during_page_unload
https://developers.google.com/web/updates/2019/12/chrome-80-deps-rems#disallow_allow_popups_during_page_unload

unload の代替の推奨 pagehide
navigator.sendBeacon() など
https://developers.google.com/web/updates/2018/07/page-lifecycle-api#the-unload-event
https://developer.mozilla.org/ja/docs/Web/API/Navigator/sendBeacon

beforeunload の推奨される処理
https://developers.google.com/web/updates/2018/07/page-lifecycle-api#the-beforeunload-event

投稿2020/02/19 04:15

x_x

総合スコア13749

kamiyu

2020/02/19 12:03

x_x様回答ありがとうございます。私の環境で改めて確認してみたところ、おっしゃる通り動作していました。 unloadイベントの処理では画面で取得していた排他を解除をしています。別メソッドを呼び出し、その先でajax通信をしてサーバー側の処理の呼び出しをしています。記載していただいたpagehideを使用して実装してみたところやりたい処理は一応できるようになりました。ですが、相変わらずpagehideイベントもデバッグすることはできませんでした。また、unload⇒pagehideへ切り替えると上手くいかず、unloadとpagehide両方を実装してその中で同じ処理をするとなぜか動作します。下記のようなイメージです。 ■上手くいく $(window).on('unload', function(event) { // 排他解除のajaxを呼び出すメソッド }); $(window).on('beforeunload', function(event) { // 「変更が保存されませんがよろしいですか？」をチェックする処理 }); $(window).on('pagehide', function(event) { // 排他解除のajaxを呼び出すメソッド }); ■上手くいかない $(window).on('beforeunload', function(event) { // 「変更が保存されませんがよろしいですか？」をチェックする処理 }); $(window).on('pagehide', function(event) { // 排他解除のajaxを呼び出すメソッド }); 呼び出し先の処理に問題があるのかもしれませんが、現在はこれ以上の調査ができていない状況です。もしかしたらnavigator.sendBeacon()ならもっとスマートに実装できるかもしれないので、もう少し調査してみます。

行動規範の内容に同意します

普通にunloadイベント実行されていませんか？

投稿2020/02/19 03:48

yambejp

総合スコア116443

yambejp

2020/02/19 03:50

//002.html <script> $(function(){ $(window).on('unload', function(e) { document.cookie="unload=1"; }); $(window).on('beforeunload', function(e) { document.cookie="unload=0"; console.log(e.type); var dialogText="Hoge"; e.returnValue = dialogText; return dialogText; }); }); </script> <a href="001.html">001</a> // 001.html <script> console.log(document.cookie); </script> ※クッキーにunload=1が入っていればunloadイベントが実行された証拠です

kamiyu

2020/02/19 12:03

yambejp様回答ありがとうございます。記載していただいたhtmlを私の環境でも動作させてみましたところ、確かに実行されていました。（なぜデバッグで停止しないのかは分かりませんが・・・）クッキーに値を設定して動作確認をするという方法を初めて知りました。その点もありがとうございます。

行動規範の内容に同意します

あなたの回答