新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

【jQuery】URLのパラメータによって処理を分岐する方法

2019.4.27 2019.4.30

【jQuery】URLのパラメータによって処理を分岐する方法
Web制作 0 0

こちらの記事は、このような方におすすめです。

・ページのリンク元(ホームページやSNSなど)に応じて表示を異なるものにしたり、リンク後の処理を分けたいという方

妙高Web屋LINE@ 友だち追加

ホームページ制作において、

「どのページからリンクして訪れてくれたかによってリンク先の表示を変えたり、処理を分けたりしたい!」

という場合もあるかと思います。

その様な場合には、リンク元のページの中身をまず編集します。

リンク先のURLを、このような形式に変えてみてください(変数の指定の形式は自由です)。

[https://〇〇.〇〇/?key=value00]

[https://〇〇.〇〇/?key=value01&price=100&…]

この様にすることで、

「このページから目的のページにリンクする場合、keyという変数にvalue00という値を指定している。また別のページからの場合はvalue01を指定している。」

と、リンク元のページ(またはリンク元のボタン)が判別できるように変数をあらかじめ振っておいてください。

その前提のもとでご紹介するのが、

「URLにくっ付いているパラメータ(変数)によってjQueryの処理を分岐する方法」

です!

この記事の目次

【結論】URLに付随している変数によってjQueryで処理を分岐する方法

まずは結論から。

こちらのjQueryのコードを、リンク先(リンク元ではありません)のページ内に加えてみてください。

var url = location.href;
var paramArray = [];
urlsplt = url.split("?");
parsplt = urlsplt[1].split("&");

for ( i = 0; i < parsplt.length; i++ ) {
param = parsplt[i].split("=");
paramArray.push(param[0]);
paramArray[param[0]] = param[1];
}

if ( paramArray["key"] == "value01") {
// URLの一部が[key=value01]であった場合の処理
} else {
// URLの一部が[key=value01]以外の場合の処理
}

ページの先頭へ戻る

[詳細]URLの分解と配列への格納がポイント!

上記のコードのポイントは、「URLを分割して変数として格納し、その値によって処理を分岐する」というものです。

いくつかに分割してご説明します。

urlsplt = url.split("?");
parsplt = urlsplt[1].split("&");

上記の部分は「URL」の分割です。

まず、URL全体を[?]で分割して、変数[urlsplt]に格納します。

その上で、配列[urlsplt]の2番目、つまり[?]で分割した後半の部分を、[&]で分割して変数[parsplt]の値として格納します。

(※配列urlspltの添字は「1」ですが、スタートが「0」なので配列の2番目となります。)

この時点で配列[parsplt]には、[key=value01][price=100][name=AAA]のような値が格納されているはずです。

その上で、下記のコードです。

for ( i = 0; i < parsplt.length; i++ ) {
param = parsplt[i].split("=");
paramArray.push(param[0]);
paramArray[param[0]] = param[1];
}

こちらでは、配列[parsplt]に格納されている個数だけ、[=]で値を分割して格納する処理を行います。

それを受けて、そのあとに値に応じた分岐処理を記述します。

if ( paramArray["key"] == "value01") {
// URLの一部が[key=value01]であった場合の処理
} else {
// URLの一部が[key=value01]以外の場合の処理
}

上記の場合は[key]に相当する値が[value01]の場合にifの直後の行の処理を実行し、それ以外の場合にはelseの直後の行の処理を行います。

もちろんですが、分岐が3通り以上に及ぶ場合はelseifを使用することも可能です。

ページの先頭へ戻る

参考サイト

こちらの記事を作成するにあたり、下記のページを参考にさせていただきました。

大変ありがとうございました!

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ