My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

※ 当サイトはアフィリエイト広告を利用しています

【JavaScript】パラメータ引き継ぎ用JSを作りました(第2弾)

JavaScript-logo

今日は、パラメータ引き継ぎ用のJavaScript第2弾を作成しました。

【関連記事】
times-diary.hatenablog.com


ちなみに、
パラメータとは?と思われた方は、
こちらの記事が参考になると思いますよ。↓
getパラメータ/クエリーストリングとは? « アクセス解析Q&Aフォーラム


今回の動作としては、以下の通りです。

パラメータ引き継ぎJS(2) の動作

ページ内の画像に設定したURL+パラメータを遷移先URLに自動設定する

具体的には、以下の流れとなります。

【動作の流れ】

(アクション)ユーザーはページ内の画層をクリック
(結  果) 画像に設定されているリンク(aタグ内のURL)+パラメータを遷移先URLとしてリンク先ページが表示される。

【処理の流れ】

1. ページ内の画像に設定したリンクURLを取得
2. パラメータの値を取得
3. 上記1のリンクURL+上記2のパラメータの連結した値を作成
4. 上記3のURLをリンク先URLとしてページ移動、リンク先ページを表示

Demo
※デモページでの確認手順
1. デモページ表示時に、ブラウザのアドレスバーで表示されているURL末尾に、
「?q=12345」
のように仮パラメータを入力し、Enterで確定。
2. ページ内の画像をクリックします。
⇒ リンク先のアドレスバーに先程の仮パラメータが設定されていることが確認できます。
ちなみにこちらのデモの場合、実行した結果として遷移先で以下のように表示されます。
https://www.google.co.jp/?q=12345

コード

今回この機能実現のために実装したコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>パラメータ引き継ぎJS</title>

<!-- パラメータ引き継ぎ設定スクリプト -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var prm;

function retrieveGETqs() {

	var query = window.location.search.substring(1);
	return query;
	 /* 引数がない時は処理しない */
	if (!query) return false;

}

$(function(){
	jQuery('.url').click(function() {

	//リンク先を取得
	var target_url = $(this).attr("href");
	
	//パラメータを取得
	var str = retrieveGETqs();
	prm = decodeURIComponent(str);
	
	if (prm) {
    //target_urlに'?'を含む場合
      if (target_url.indexOf('?') != -1) {
    //追加パラメータの先頭文字列を'&'に置換
      $('a.url').attr('href', target_url + '&' + prm);
        } else {
          $('a.url').attr('href', target_url + '?' + prm);
                }
            }	
  })	
})

;//# sourceURL=foobar.js
// JavaScript Document
</script>
<!-- パラメータ引き継ぎ設定スクリプト-->
</head>

<body>
<a class="url" href="http://google.co.jp"><img src="(画像のパス)" alt=""></a>
</body>
</html>

以上、ご参考まで。

※ 当サイトはアフィリエイト広告を利用しています