パラメータによって処理を変更する

特定のリンクからページ遷移してきた時だけ、別の表示にしてほしいという要望がたまにあります。(ページ内にあるアコーディオンの2番目を開かせたい、ポップアップを開かせたい、など)

実装方法としてはいくつかありますが、今回はリンクにパラメータを付加して、そのパラメータに応じてJavaScriptで何らかの処理を行う方法を試してみます。

サンプルコード

HTML

遷移元のリンクにはパラメータを追加します。このパラメータの値に応じて処理を分けます。

<a href="https://cly7796.net/blog/sample/change-the-processing-by-the-parameters/index.html?pattern=typeA">遷移元リンク</a>

JavaScript

まずはパラメータを取得して、そのパラメータの値を確認するところまでやってみます。

// パラメータの取得
var params = [];
var param = location.search.substring(1);
if(param !== '') {
	param = param.split('&');
}
for(var i = 0; i < param.length; i++) {
	params[i] = param[i].split('=');
}

// パラメータの使用
var target = 'pattern'
for(var i = 0; i < params.length; i++) {
	if(params[i][0] == target) {
		alert(params[i][1]);
	}
}

パラメータ確認のデモページ
　

JavaScript

次に、パラメータの値に応じて処理を行ってみます。

// パラメータの取得
var params = [];
var param = location.search.substring(1);
if(param !== '') {
	param = param.split('&');
}
for(var i = 0; i < param.length; i++) {
	params[i] = param[i].split('=');
}

// パラメータの使用
var target = 'pattern';
var value;
for(var i = 0; i < params.length; i++) {
	if(params[i][0] == target) {
		value = params[i][1];
		break;
	}
}

switch (value) {
	case 'typeA':
		alert('typeAです');
		break;
	case 'typeB':
		alert('typeBです');
		break;
	case 'typeC':
		alert('typeCです');
		break;
	default:
		alert('それ以外です');
		break;
}

パラメータなしのデモページ
パラメータ「typeA」のデモページ
パラメータ「typeB」のデモページ
パラメータ「typeC」のデモページ