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取得當前網址列


在透過Split去切割字串,取得陣列的第一個數值




為什麼不取第零個呢?
Split方法是將文字做切割,這次切割的是『?』,所以會將index2.html與a=b&b=c&c=d分別放在Array空間的0與1位址



將temp裡的值再分割,這次為『&』



透過for去走訪vars的每一個元素




大致上就是這麼簡單而已,主要都透過Split在切割字串

參考資料:
http://blog.eddie.com.tw/2006/08/08/pass-parameters-between-html-pages/