ページ離脱防止機能を実装する - knowledge base
beforeunloadイベントを利用して実装 先日、とあるCMSの管理画面にて、記事入力途中・画像入力途中でのページ離脱防止機能の実装を行いました。 要件としては、Google Chromeのみで、離脱時にアラートを表示するというものでした。 ページ遷移前に発火するbeforeunloadというイベントを利用した実装を行なったのですが、僕自身このイベントに真正面から向かい合って実装に取り組んだことがなかったので、ところどころ小さな落とし穴があったため、その備忘録としてこの記事を書かせていただきます。 ちなみに、beforeunloadイベントの詳細はこちらを参照ください。 developer.mozilla.org テストは必ず入力フィールドのあるページで とても基本的な落とし穴ですがテストは必ず入力フィールドのあるページで行なってください。 Google Chrome公式でもRequi
beforeunload
このイベントによって、ウェブページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認が求めることができます。ユーザーが確認すれば、ブラウザーは新しいページへ遷移し、そうでなければ遷移をキャンセルします。 仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの preventDefault() を呼び出すことになっています。 しかし、すべてのブラウザーがこのメソッドに対応しているわけではなく、一部はイベントハンドラーに古い方法二つのうちの一つを実装するよう求めていることに注意してください。 イベントの returnValue プロパティに文字列を代入する イベントハンドラーから文字列を返す 一部のブラウザーでは返された文字列を確認ダイアログで表示するために使用し、イベントハンドラーがユーザーに独自のメッセージを表示できるようにしていました。しかし、
beforeunloadにカスタムメッセージを表示できなくなっていた - Qiita
beforeunload でカスタムメッセージを出したいのに、何度やってもデフォルトっぽいメッセージが出てくる。 なぜだろう。 調べていたら、最終的に下記の画面にたどり着いた。 https://bugs.chromium.org/p/chromium/issues/detail?id=587940 ↓ https://www.chromestatus.com/feature/5349061406228480 バグではなく仕様でした。 各種ブラウザで試した感じだとIE/Edgeを除いて、最新のブラウザでカスタムメッセージは使えなくなっていた。 どのブラウザもメッセージが微妙に異なるが、Chromeが一番不安感を醸し出している。 Chrome SafariとFirefoxは割と平和である。 Firefox Safari
parent連打やめろ - Qiita
はじめに jQueryに不慣れな方向けにアンチパターンを紹介する記事です。 親の要素を取得するparentはメソッドチェーンが可能で親の親の要素を取得できます。 その感覚で親の親の親の親の…とやってしまいがちですが、今すぐやめましょう。 アンチパターン <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div data='div1' class='div1'> div1 <div data='div2' class='div2'> div2 <div data='d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
