【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>