*

IEとchromeでbeforeunloadをaタグのhrefに反応させずに利用……できなかった

公開日: : 最終更新日:2014/03/14 投稿者:raru javascript, web技術

今回beforeunloadが面倒な動きをしていたので調査&ある程度都合よくしてみました。
してみましたができませんでした

beforeunloadイベント

jQueryがラップしているイベントの一つに「beforeunload」というものがあります。
これは画面を離れるタイミング呼び出されることを期待されているイベントです。
期待されているだけで、画面を離れるときのみで起動するわけではありません。
鬱陶しいことこの上ないですね。

ちなみに正常に動作していないのはIEだからだということを確認しています。
本当に鬱陶しいです。

IEでの動作

IEでは具体的にどのように動作しているのでしょうか?
答えは「aタグのhrefに反応している」ことです。

aタグをページ内リンクであったり、ボタンのように使用してリンクを殺している場合にもイベントが起動します。
ですので、画面を離れるときに「画面を移動してよろしいですか?」というメッセージを出そうとしていると画面を移動しないのにアラートが上がってしまうのです。

私は使用しませんがよくあるものとして、以下が例となります。

<a href="javaScript:void(0);">リンクです</a>

このリンクを押すたびにアラートがあがってしまうわけですね。

対策

では上記を発生させないためにどのようにしたらよいか、ということです。
これは私が対応した方法ですので、どのような状況かによって流用可能か不可能か変わってくるかと思います。
あくまで参考程度に。

今回の私が想定したケースは以下です。
・ページ内にあるaタグは、画面遷移があったとしても全てアラートを出さずに遷移させる
・backspaceやブラウザの閉じるボタン、戻るボタンで事故的に画面を移動しそうなときにアラートを出したい

上記の場合はaタグについては全部スルーしてしまえばいいわけですね。
修正範囲をあまり広くせずにaタグのみを殺すには以下のようにすれば良さそうです。

var tagName = e.srcElement != null ? e.srcElement.activeElement.tagName : e.currentTarget.document.activeElement.tagName;

if (tagName !== "A") {
  // 処理を書く
  var message = "画面を移動しても良いですか?";
  return message;
}

結局tagNameを取得して比較するというを取って比較を行うように対応を行いました。
そのときにtagNameの取得の仕方がchromeとIEで違っていたので、少し手間取りました。

無理だったポイント

今回このjavascriptが使い物にならなかった理由に、eから取得できるactiveElementがフォーカスのあたっているElementであったことがあります。
つまりaタグイベントが発生し、内部の処理でそれをハンドリングしても、その直後にbackspaceなどで戻ろうとするときにもaタグが取れてきてしまうのです。
そのせいでアラートがあがらずに普通に遷移しちゃいました。
かといって、フォーカスを無理やり外してしまったらtabで画面を操作し辛くなっちゃいます。

なんか良い方法はないものか

関連記事

no image

MAMPでLaravelを動作させる

先日laravelをMAMPのhtdocsに配置しましたが、当然それでは動かなかったので設定しました

記事を読む

no image

Laravelでクラスをnewする

今回はLaravelでのクラスのnewの仕方です。 正確には、Laravelでの他ファイルで作成し

記事を読む

no image

Node.jsのSocket.io入門

前置き WebRTCを使用して通信を行なうときに、offerなどの情報を伝える為にサーバサイドのプ

記事を読む

no image

PHPでXMLをnamespaceを利用したxpathでnode取得

PHPでxmlを読み込んでxpathでnodeを取得して見たいと思います。 今回はyahooの形態

記事を読む

no image

Mac OS X (Yosemite) にLaravelをインストール

Max OS 10.10(yosemite)にPHPフレームワークのLaravelをインストールして

記事を読む

no image

WebRTC + Node によるルーム機能付きビデオチャット 1

現在googleで調べても日本語では微妙にかゆいところに手が届かないWebRTCと Socket.

記事を読む

no image

PHPのcURLを利用してAPIをGET/POSTで叩く

PHPからcURLを利用してhttpのget, postで問い合わせを行ってみます。 今回はYAH

記事を読む

no image

socket.ioとwebRTCでビデオチャット

現在作成したいものがあるために、その予行演習として nodeのsocket.ioとwebRTC機能

記事を読む

no image

Laravelでbladeを利用したViewを作成

今回はLaravelで採用されているviewテンプレートのBladeを利用して画面を作成してみます。

記事を読む

no image

WebRTC + Node によるルーム機能付きビデオチャット 2

前回の続き こちらは前回の記事の続きになります。 また前回の記事にコメントを頂いたのですが、

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑