*

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

Javascript パターン

最近更新を行なえるほど技術を追っていませんが、日々の電車での移動時間に本を読んでいます。 2駅乗っ

記事を読む

no image

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

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

記事を読む

no image

Node.jsのSocket.io入門

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

記事を読む

no image

Laravelでクラスをnewする

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

記事を読む

no image

システムの仕様書を作れそうなウェブアプリ

現在サービス開発を本気で取り組もうと思っているraruです。 本気が指すところは、事業として成立す

記事を読む

no image

Facebookから日本語でデータ取得 (※だたしlocationは除く

Facebook Graph APIを通して取得したデータがローマ字や英語で困ることがあります。

記事を読む

no image

Facebook APIを試してみました

Facebook APIが気になったのでちょっと試してみました。 まず私が勘違いしていたこと

記事を読む

no image

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

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

記事を読む

no image

Laravelでルーティングからview表示をしてみる

Laravelでのroutes.phpの設定と、bladeを利用してview表示を行います。 いろ

記事を読む

no image

要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。

wordpressの更新を行おうとした時の上記のエラーが発生した場合に、いくつか対策方法があります。

記事を読む

Message

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

PAGE TOP ↑