『ブラウザバック時にテキストを表示させたい』
『ブラウザバック時にテキストを表示させたかったが動作しない』
『ブラウザバック時にテキストを表示させたかったが動作しない』
こういった疑問に答えます。
本記事の内容
- ブラウザバック時にテキストを表示させるやり方
- もしChromeで動作しないときの確認
Webエンジニア歴2年
WordPressの運営＆立ち上げ70サイト以上かかわっている
こういった私が解説していきます。
1. ブラウザバック時にテキストを表示させるやり方
- その①：jsファイルの読み込みをする
- その②：jsファイルに記載する
- その③：実際に動作確認する
その①：jsファイルの読み込みをする
functions.phpで読み込ませるやり方
functions.phpで読み込みさせているので、それに従って書いていきます。
ファイル名などは実際の環境に合わせて書き換えてくださいね。
|
1 2 3 4 5 6 7 8 9 |
<?php function mytheme_scripts() { // ～CSS～ // ～js～ // ブラウザバック用のjsファイル wp_enqueue_script( 'back-js', get_template_directory_uri() . '/assets/js/back.js', array('jquery'), date("Ymd-His"), true ); } add_action( 'wp_enqueue_scripts', 'mytheme_scripts' ); |
後はback.jsファイルを作成し、jsディレクトリへ置きます。
その②：jsファイルに記載する
先ほど作成したback.jsに記載していきます
下記のような感じで書きます。
コピペOKです。
|
1 2 3 4 5 6 7 8 9 |
// popstate イベントリスナーの設定 window.addEventListener('popstate', function(e) { console.log('ブラウザバックを検知ィ！'); alert('ブラウザバックを検知しました。'); history.pushState(null, null, location.href); }); // 初回読み込み時に履歴にエントリを追加 history.pushState(null, null, location.href); |
『popstate』は履歴が変更されたときに動作します。
ここではブラウザバック時にalertを表示させています。
さらに、初回リロード時とブラウザバック検知時に『pushState』で現在のURLを履歴に残すようにしています。
あっさりと実装できましたね。
その③：実際に動作確認する
ホントにできたの？と不安になるので検証していきます。
ページにアクセスしたらリンクを押します。
飛んだら画面左上の『←』の戻るボタンを押します。
すると、、、
ちゃんと表示されましたね！
動作確認できましたが、ちょっと不具合？もあったので下記で説明していきますね。
2. もしChromeで動作しないときの確認
- その①：Chromeで挙動があやしかった
その①：Chromeで挙動があやしかった
ブラウザバックを繰り返していていて気付いた
リンクをクリックして『戻る』ボタンを押す動作を繰り返していると、アラートが出ないタイミングが出てきました。
ページを遷移、、、戻るボタンをクリック、、、アラートが出ない、、、と困ってました。
どうやらChromeはセキュリティ対策をしていたようです。
画面上でクリックやドラッグのアクションをとってからブラウザバックをすると意図したとおりにアラートが出てきました。
この挙動と闘った方がいらっしゃいましたので、ぜひ参考にしてみてください。
OFFICE-OBATA様
以上、ブラウザバック時にテキストを表示させるやり方をご紹介しました。
ではまた。
