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
,透過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
留言
張貼留言