ホームページ制作　オフィスオバタ

Jqueryでリンククリック時に追加パラメータを設置する

OBATA

PHPでHTML側から情報をもらう方法として、フォームによる投稿があります。
これと異なる方法に、リンクにパラメータを付加する方法があります。

例えば以下のような記述です。

sample.php?date=20210630

リンクにパラメータを直接記述して、PHPに情報を送信する方法です。

今回昔制作したPHPプログラムに手を加えることがありました。
その際に、リンク式パラメータに対し後から追加パラメータを設置する必要がありました。
Jqueryでそんなことができるのだろうか？
と思いましたが、ググって調べてやってみると、実現できました。

忘備録として記録いたします。

実現したかったこと

今回やりたかったことは記事のUP／DOWN処理に、表示位置をキープするという処理を加えることです。
いままでＵＰ／ＤＯＷＮをすると画面が毎回先頭位置へ移動していました。
使い勝手が悪いので、ボタンを押した時点での画面表示位置をキープする処理を付け加えたいと思いました。
表示位置をキープする処理は以前に行っていたので、どうすればよいかわかります。

PHPフォーム送信しても、現在の表示位置をキープできるようするテクニック

ただ、前回は「フォーム式」で表示位置をキープしていましたが、今回は「リンク式」で表示位置をキープする必要がありました。

「リンク式」となっている部分を「フォーム式」に作り替える方法もありましたが、大幅修正が必要になるため、「リンク式」のまま追加で現在の表示位置パラメータを追加することにしました。

クリックした段階で表示位置をリンクパラメータに追加するサンプル

クリックした時点で、現在の表示位置をリンクパラメータに追加するサンプルです。
こちらからご覧いただけます。

各メニューボタンのリンクには、リンクパラメーターは記述されていませんが、クリックするとリンクにパラメータが付加されます。

ソースはこちら


<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>テスト</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	var para = para_get();
	var posi = 0;

	if (("posi" in para) == true)
	{
		posi = para["posi"];
		$("#msg").text("付加されたパラメータは ?posi="+posi+"です");
	}
	else
	{
		$("#msg").text("パラメータは付加されていません");
	}

	$(window).scrollTop(posi);
	$("ul li a").click(function()
	{
		var link_url = $(this).attr("href");
		var posi = $(window).scrollTop();
		$(this).attr("href", link_url+"?posi="+posi);
	});


});

function para_get()
{
	// URLパラメータを"&"で分離する
	var url_search = location.search.substr(1).split('&');
 
	// パラメータ連想配列エリア初期化
	var para = [];
 
	// キーエリア初期化
	var key = null;
 
	for(var i = 0 ; i < url_search.length ; i++)
	{
		// "&"で分離したパラメータを"="で再分離
		key = url_search[i].split("=");
 
		// パラメータを連想配列でセット
		para[key[0]] = key[1];
	}
 
	// 連想配列パラメータを返す
	return (para);
}
</script>
<style type="text/css">
msg
{
	border: 1px solid #000;
	padding: 20px;
	height: 60px;
	width: 200px;
	position: fixed;
	left: 20px;
	top: 20px;
}

#reset
{
	padding: 0px;
	height: 60px;
	width: 200px;
	position: fixed;
	left: 20px;
	top: 140px;
}

ul
 {
	padding: 20px;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #ccc;
}

li
{
	list-style-type: none;
	margin-bottom: 200px;
	padding: 0px;
}

li:last-child
{
	margin-bottom: 0px;
}

a
{
	display: block;
	background-color: #333;
	padding: 10px;
	color: #FFF;
}

a:hover
{
	background-color: #3CF;
}

</style>
</head>
<body>
<div id="msg"></div>
<div id="reset"><a href="01.html">リセット</a></div>

<ul>
<li><a href="01.html">メニュー1</a></li>
<li><a href="01.html">メニュー2</a></li>
<li><a href="01.html">メニュー3</a></li>
<li><a href="01.html">メニュー4</a></li>
<li><a href="01.html">メニュー5</a></li>
<li><a href="01.html">メニュー6</a></li>
<li><a href="01.html">メニュー7</a></li>
<li><a href="01.html">メニュー8</a></li>
<li><a href="01.html">メニュー9</a></li>
<li><a href="01.html">メニュー10</a></li>
</ul>

</body>
</html>

仕組みを解説いたします

スクリプト部分

スクリプト部分について解説いたします。
大きく5つの部分に処理が分かれています。

$(document).ready(function()
{
	// （１）リンクパラメータ取得
	var para = para_get();

	// （２）表示位置初期化
	var posi = 0;

	if (("posi" in para) == true)	// （３）リンクパラメータに表示位置が含まれているか？
	{
		// 含まれている場合の処理
		posi = para["posi"];
		$("#msg").text("付加されたパラメータは ?posi="+posi+"です");
	}
	else
	{
		// 含まれていない場合の処理
		$("#msg").text("パラメータは付加されていません");
	}

	// （４）画面位置を指定位置に変更
	$(window).scrollTop(posi);

	// （５）リンクがクリックされた時の処理
	$("ul li a").click(function()
	{
		// リンク部分の記述を取り出す
		var link_url = $(this).attr("href");

		// 現在の表示位置を取得
		var posi = $(window).scrollTop();

		// リンクパラメータに現在の表示位置パラメータを付加する
		$(this).attr("href", link_url+"?posi="+posi);
	});
});

（1）パラメータ取得

呼び出し時のリンクパラメータをＧＥＴしています。
PHPの場合は造作もないことですが、今回のサンプルはJavascriptで組んでいるため、Javascriptからリンクに記述されたパラメータを取得しています。

以前の記事をそのまま流用しています。

JavascriptでURLパラメータを連想配列にして取得する。

（２）表示位置初期化

パラメータとして渡された「表示位置情報」を入れる変数の初期化を行います。
０をセットしているのは、初回起動時に先頭を表示させるためです。
なぜならば、初回起動時はリンクパラメータが渡されないため、初期値を入れておかないと誤動作を起こす可能性があるためです。

また、（３）のelseの処理でposi=0を設定する方法もありますが、私はあえて先に記述します。
それは、if文の結果にかかわらずposi変数に値が必ず入ることを保証できるためです。

余談ですが、プログラムでは結果的に同じことでも「例外」ということが得てして発生します。
例えばif文でもthen、elseのどちらのも行かないということもまれに起こります。

そんな場合にでも初期値は必ず設定されるようにしておくことで、誤動作を最小限にすることができます。

（3）リンクパラメータの有り無し判断

リンクパラメータが付加されている場合と、されていない場合で処理を分岐しています。
(“posi” in para) は見慣れない構文ですが、この記述で正確に配列メンバ名のあり・なしを判定できます。

詳しくはこちらの記事をご参照ください。

JavascriptでPHPの「isset」のやり方～配列メンバ名の有無を判断する～

（４）画面表示位置を指定位置に変更

この部分で、表示位置に画面を移動しています。
scrollTop()はJqueryで画面表示位置を指定する関数です。

（５）リンクがクリックされた時の処理

この部分でメニューがクリックされた場合に、リンクに現在のポジションをパラメータとして付加しています。
仕組みはJqueryのattr()関数を利用して付け加えています。

attr()関数は、参照しているHTMLの記述を抜き出したり、付け加えたりします。
例えば以下のような例です。

//attr()例
<a href="https://office-obata.com" target="_blank">リンク</a>

// Jquery 例
$("a").click(function()
{
    var $link = $(this).attr("href");
    var $target = $(this).attr("target");
});

上記の例だと、$link には「https://office-obata.com」
$targetには「_blank」が格納されます。

attr()関数は対象タグの項目を参照します。

これに対し、以下のように記述すると記載内容が変わります。

//attr()例
<a href="https://office-obata.com" target="_blank">リンク</a>

// Jquery 例
$("a").click(function()
{
    $(this).attr("href", "https://office-obata/blog/");
    $(this).attr("target", "_top");
});

// 実行した結果
<a href="https://office-obata.com/blog/" target="_top">リンク</a>

attr()関数の第2引数に設定値を入れると、その値に書き換わります。
この特性を利用して、リンクパラメータに追加をしています。

Jqueryは使いよう

画面表示位置はブラウザ側でしかわからない情報です。
今回はブラウザ側の情報をリンクパラメータとしてPHPに渡すという内容でした。

最初はそんなことできるのか？
と思いましたが、案外できてしまいました。

「できない」と決めつけるのではなく、
「できるかもしれない」と思ってググるほうが難題を解決できます。

今回もよい体験をいたしました。

モバイルバージョンを終了