Follow Fang!: 透過JavaScript讓HTML頁面互相傳值

2013/09/07

透過JavaScript讓HTML頁面互相傳值

最近在想如何將值傳遞到另一個網頁，大二有學過用PHP Post以及Get方式去傳遞
不過想嘗試用JavaScript傳遞，就上網找了一下方法

參考『在HTML頁面之間傳遞參數』文章，是透過JavaScript去分析網址內的內容，將內容的值取出來
我以該篇文章作為基礎，透過Button去傳遞值，讓第二個網頁的JavaScript去分析該網址值，並取出來用

第一個頁面的程式碼如下：

<!DOCTYPE html>

<html>
 <head>
  <meta charset="utf8">
  <title>測試1</title>
 </head>
 <body>
  <button onclick='location.href="index2.html?a=b&b=c&c=d"'>
   One
  </button>
 </body>
</html>

可以看得到我有一個Button，點擊之後會觸發onclick事件
觸發之後將網址轉到index2.html?a=b&b=c&c=d

問號後接的是我要傳遞的值

再來看第二個頁面的程式碼吧！

<!DOCTYPE html>

<html>
 <head>
  <meta charset="utf8">
  <title>測試2</title>
  <script type="text/javascript">
   
   function show () {
    
    //URL
    var url = location.href;
    
    //取得問號之後的值
    var temp = url.split("?");

    //將值再度分開
    var vars = temp[1].split("&");

    //一一顯示出來
    for (var i = 0; i < vars.length; i++) {
     alert(vars[i]);
    };

   }

  </script>
 </head>
 <body>
  <button onclick="show()">
   two
  </button>
 </body>
</html>

可以看到，頁面載入時並不會觸發什麼事情
只會在點擊Button時才會觸發show

show函數裡面是先透過location.href取得當前網址列