JavaScript 與 HTML 頁面互相傳值

12月 15, 2015

透過JavaScript去分析網址內的內容，將內容的值取出來
，透過Button去傳遞值，讓第二個網頁的JavaScript去分析該網址值，並取出來用

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

jstohtml.html

<!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

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

index2.html

<!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