今日は、パラメータ引き継ぎ用の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>
以上、ご参考まで。