クェリ文字列を読み込んで、画面の表示内容を変える方法です。
普通サーバーサイドでやっちゃうことですが、ブログなどクライアントでしかプログラムができないサイトでは有効な手段だと思います。
SAMPLE解説
<script language="javascript" type="text/javascript">
onload = function(){
var img = document.getElementById('photo');
var val = getParameters()['photono'];
switch(val){
case 'one':
img.src = './img/0142-650x435.jpg';
break;
case 'two':
img.src = './img/0156-650x435.jpg';
break;
case 'three':
img.src = './img/0157-650x435.jpg';
}
}
/**
* クェリ文字列パラメータを連想配列にして返す。
* @return クェリ文字列パラメータの連想配列。key=パラメータ名、value=パラメータ値
*/
function getParameters(){
var parameters = new Array();
var queryStr = location.search;
//パラメータがなかったら空オブジェクトを返す。
if(queryStr == null || queryStr.length == 0){
return parameters;
}
//先頭の"?"を除外する。
queryStr = queryStr.substring(1,queryStr.length);
//splitは指定したseparaterがない場合、配列ではなく、単一の文字列を返してくる。。。
if(queryStr.indexOf('&') < 0){
param = queryStr.split('=');
parameters[param[0]] = param[1];
return parameters;
}
//&がない場合は1つ
var paramStr = queryStr.split('&');
for(var i = 0; i < paramStr.length; i++){
param = paramStr[i].split('=');
parameters[param[0]] = param[1];
}
return parameters;
}
</script>
location.searchでクェリ文字列を取得できます。後は
・先頭の?を削除する
・&でつながれているパラメータセットをsplit
・=でつながれているパラメータセットをsplit
で分解しているだけです。
●アンカーでも同じことができるんじゃないか？
『クェリ文字列ではなく、アンカーでもできるのでは？』と思ったのですが
、アンカーの場合、次画面遷移の場合、サーバーにアクセスしてくれないブラウザがあるので、あまり有効じゃないなと思いました。リンク形式だとどのブラウザも再遷移してくれません。『必ず、他のURLから遷移する画面である』のであれば、アンカーでもいいんじゃないかなと思います。
SAMPLE
画像素材は
http://0501file.com/ よりお借りいたしました。
どうもありがとうございます。
PR
