トップ > プログラミング > JavaScriptでURLのパラメータによって変化するサイトを作る方法

JavaScriptでURLのパラメータによって変化するサイトを作る方法

プログラミング
参考にしたサイトはこれ

 
URLの引数を参考にして、サイトの表示を変えたい。
の２通りがあるが、前者を採用。
 
参考にしたサイトのコードをコピペして、
テキトーに「test.html」とかつけてみたけど動かなかった。
⇒どうやらjQuery言語が混ざっていた模様。
　$マークのところね。
 
// URLのパラメータを取得
var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
  // 「&」が含まれている場合は「&」で分割
  var param = urlParam.split('&');
 
  // パラメータを格納する用の配列を用意
  var paramArray = ;
 
  // 用意した配列にパラメータを格納
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
  }
 
  // パラメータidがosakaかどうかを判断する
  if (paramArray.id == 'osaka') {
    $('.pram').append('<p>大阪です</p>');
  } else {
    $('.pram').append('<p>大阪ではありません</p>');
  }
}
 
このコードだと、jQueryが混ざっちゃってるんで、javaScriptのみで、サンプルを作り直してみた。↓
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang="ja">
    <head>
        <title>サンプル</title>
    </head>
    <body id="body">
        Hello, World!<br><br>
        <a href="?id=tokyo">URL末尾が"?id=tokyo"の場合</a><br>
        <a href="?id=osaka">URL末尾が"?id=osaka"の場合</a><br>
        <a href="?id=nagoya">URL末尾が"?id=nagoya"の場合</a><br>
        <a href="?id=nagoya&pass=tokyo">URL末尾が"?id=nagoya&pass=tokyo"の場合</a><br>
        <a href="?id=nagoya&pass=tokyo&option=train">URL末尾が"?id=nagoya&pass=tokyo&option=train"の場合</a><br><br>
    </body>
<script>
// 現在アクセスしているURLを取得します。
document.writeln("------------------------------------------------------<br>");
var url = location.href;
document.writeln("「location.href」メソッドで取得できる値");
document.writeln("<br>");
document.writeln(url);
document.writeln("<br><br>");
//alert(url+"\nにアクセスします");
 
// 現在アクセスしている"?"以降を取得します。
var a = location.search;
document.writeln("------------------------------------------------------<br>");
document.writeln("「location.search」メソッドで取得できる値");
document.writeln("<br>");
document.writeln(a);
document.writeln("<br><br>");
 
var urlParam = location.search.substring(1);
document.writeln("------------------------------------------------------<br>");
document.writeln("「location.search.substring(1)」メソッドで取得できる値");
document.writeln("<br>");
document.writeln(urlParam);
document.writeln("<br><br>");
 
// URLのパラメータを取得
var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
  // 「&」が含まれている場合は「&」で分割
  var param = urlParam.split('&');
 
  // パラメータを格納する用の配列を用意
  var paramArray = ;
 
 document.writeln("------------------------------------------------------<br>");
 document.writeln("引数を分割した結果");
 
  // 用意した配列にパラメータを格納
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
    document.writeln("<br>");
    document.writeln(paramItem[0]);
    document.writeln("   =>   ");
    document.writeln(paramItem[1]);
  }
 
  document.writeln("<br><br>");
 
  // パラメータidがosakaかどうかを判断する
  if (paramArray.id == 'osaka') {
    //$('body').append('<p>大阪です</p>');
    var answer = "大阪です";
  } else {
    //$('body').append('<p>大阪ではありません</p>');
    var answer = "大阪じゃないです";
  }
 
 document.writeln("------------------------------------------------------<br>");
 document.writeln("idが'osaka'かどうかの判定<br>");
    document.writeln("idは");
    document.writeln(answer);
    document.writeln("<br><br>");
 
 document.writeln("------------------------------------------------------<br>");
    document.writeln("たとえばこんな感じで、idごとに、裏のロジックで使用するディレクトリ名も変えられる。↓<br>");
    var directory = "/bbs/";
    directory += paramArray.id;
    directory += "/logs"
    document.writeln(directory);
}
</script>
</html>

 

このコードなら、「test.html」とかテキトーに名前をつけて、
デスクトップにでも置いてもらって大丈夫。
 
ダブルクリックして開いてみて、いろいろ挙動を見てほしい。
?マーク以降にいろいろ値をセットしてみると、表示が変わる。