My Web道

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

【JavaScript】ページ遷移元情報取得用 パラメータ引き継ぎスクリプト

f:id:sntkk3:20170813233219j:plain

パラメータ引き継ぎスクリプト

今日は、現在のページに埋め込まれたリンクから遷移先にジャンプした際、遷移先で遷移元ページURLをパラメータで取得するためのJavaScriptをご紹介します。

【目的】
遷移元URL情報が引き継がれているため、
どういった被リンク先からアクセスされているのか、遷移先ページで把握することができます。

つまり、
(1) 被リンク先側ページで作成するリンクにこのコードを埋め込む
(2) 遷移先で遷移元URL情報が表示される
という流れになります。

サンプルコード

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />

<title>Template Format</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css">

<!-- パラメータ引き継ぎ設定スクリプト-->
<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(){
	
	//パラメータを取得
	var str = retrieveGETqs();
	prm = decodeURIComponent(str);

    //$('a.linkA').attr("href", "( 遷移先URL )" + prm);
	$('a.linkA').attr("href", "http://tkksn-portfolio.lolipop.jp/works/lesson/prm_demo?=" + prm);
})

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

</head>

<body>
<a class="linkA"><img src='http://tkksn-portfolio.lolipop.jp/works/lesson/wp-content/uploads/2017/08/KAZUKIhgfdrfgh_TP_V-300x200.jpg'></a>

</body>
</html>

動作確認方法

1. 上記サンプルコードで作成したページをブラウザで表示します。

2. ブラウザのアドレスバーでページURLの末尾にパラメータを入力 (ここでは、試しに 「 ?q=1234 」と入力してみます。)
f:id:sntkk3:20170813223113p:plain

3. リンクを埋め込んだ画像をクリックします。

4. 遷移先ページのアドレスバーにパラメータ情報が表示されます。
f:id:sntkk3:20170813224457j:plain

Chromeでのデバッグ方法

この動作をChromeブラウザでデバッグしてみます。

1. Chromeブラウザで遷移元ページを表示

2. 上記ページで右クリック([Ctrl]+{Shift]+[I])でディベロッパツールを起動します。

3. [Sources]タブに移動し、foobar.js ※ をクリックします。
 f:id:sntkk3:20170813225511j:plain

 ※通常、HTMLファイル内に記述されたJavaScriptファイルは表示されません。
 今回のサンプルスクリプトには、
 >||
 ;//# sourceURL=foobar.js
 |

 の一文を記述していることで、デバッグ画面に foobar.js として表示されています。

4. パラメータに値が取得できていることを確認するため、変数代入箇所にブレイクポイント(行番号箇所をクリック)を設定します。
f:id:sntkk3:20170813230900p:plain

5. リンク付き画像をクリックします。

6. ステップオーバーを実行(クリック)します。
 f:id:sntkk3:20170813231313j:plain

7. 変数に値(今回の場合「?q=1234」)が設定されていることが確認できます。
f:id:sntkk3:20170813230922p:plain

【参考サイト】

chrome デバッグ ステップイン 
Chromejavascriptデバッグ!まず半歩♪ : https://www.slideshare.net/yuka2py/chromejavascript