2015年12月15日 星期二

JavaScript 與 HTML 頁面互相傳值

透過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





沒有留言:

張貼留言