2020.10.01  2021.04.04

遷移前のページURLを参照してjavascriptで条件分岐をする方法

こんにちは!マコブログです!

今回は、WordPressや静的サイトで、遷移元のURLを参照して条件分岐する方法をご紹介します。

前回に続き、URLでの条件分岐ですが、今回は遷移前のページの情報を参照して条件分岐をするので、

ユーザーがどのような動きをした場合にどのような処理をするのかを細かく条件分岐で記述できます。

実際に使ってみる

それでは、まずは使用しているjsファイルに、下記を記述してください。

var ref = document.referrer
if (ref.indexOf('/遷移前のURL') !== -1) {
実行したい処理の内容
} else if (ref.indexOf('/遷移前のURL') !== -1) {
実行したい処理の内容
}

簡単に上記の記述の説明をすると、

まず、document.referrer は、遷移元となったページのURLを取得する命令です。


これが一番大事な場所ですね。

そして、その値をrefという変数に代入します。

次に、条件分岐で.indexOf() というメソッドを使います。

こちらは、対象の要素にしてした文字列が含まれているかを確認する便利なやつです。

そして、!== -1と定義することによって、否定の否定ですから、肯定になりますね。

あとは含まれていたら行う条件を、if分の中に記述すれば完成になります。

この方法を使用すると、HTMLで構成された静的サイトだろうがWordPressのサイトだろうが、関係なく遷移元のURLを取得して条件分岐がかけるようになります。


まとめ

いかがでしたでしょうか?
他の解説記事はこちらです↓
https://qiita.com/tosuu/items/01d9830f5150820bfb1f

前回に続き、今回は「遷移元のURLで条件分岐」 する方法をご紹介しました。
URLに特定の文字列が含まれているかを検証する方法はこちら↓
https://makoblog.net/js/2020-10-224.html

ユーザーの動きに合わせて表示内容を的確に変更することで、ユーザーの興味をひいたりすることができるかもしれません。

今回の内容を参考にしてWEBサイト制作に励んでいただければと思います!

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →