【JavaScript】ページ遷移元情報取得用 パラメータ引き継ぎスクリプト
パラメータ引き継ぎスクリプト
今日は、現在のページに埋め込まれたリンクから遷移先にジャンプした際、遷移先で遷移元ページ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 」と入力してみます。)
3. リンクを埋め込んだ画像をクリックします。
4. 遷移先ページのアドレスバーにパラメータ情報が表示されます。
Chromeでのデバッグ方法
1. Chromeブラウザで遷移元ページを表示
2. 上記ページで右クリック([Ctrl]+{Shift]+[I])でディベロッパツールを起動します。
3. [Sources]タブに移動し、foobar.js ※ をクリックします。
※通常、HTMLファイル内に記述されたJavaScriptファイルは表示されません。
今回のサンプルスクリプトには、
>||
;//# sourceURL=foobar.js
|
の一文を記述していることで、デバッグ画面に foobar.js として表示されています。
4. パラメータに値が取得できていることを確認するため、変数代入箇所にブレイクポイント(行番号箇所をクリック)を設定します。
5. リンク付き画像をクリックします。
6. ステップオーバーを実行(クリック)します。
7. 変数に値(今回の場合「?q=1234」)が設定されていることが確認できます。
【参考サイト】
chrome デバッグ ステップイン
Chromeでjavascriptデバッグ!まず半歩♪ : https://www.slideshare.net/yuka2py/chromejavascript