HTML—js:利用History物件實現頁面跳轉
阿新 • • 發佈:2019-02-16
History常用的屬性和方法:
length:返回瀏覽器歷史列表中的URL數量
back():載入history列表中的前一個URL
forward():載入history列表中的下一個URL
go():載入history列表中的某個具體頁面
程式碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>第一個頁面</h1> <a href="historyPage2.html">下一個頁面</a> <input type="button" value="前進" onclick="next()"> <input type="button" value="最後一個頁面" onclick="goPage()"> </body> <script> alert(history.length); function next(){ history.forward(); } function goPage(){ history.go(3); } </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>第二個頁面</h1> <a href="historyPage3.html">下一個頁面</a> <input type="button" value="前進" onclick="next()"> <input type="button" value="後退" onclick="back()"> </body> <script> alert(history.length); function next(){ history.forward(); } function back(){ history.back(); } </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>第三個頁面</h1> <a href="historyPage4.html">下一個頁面</a> <input type="button" value="前進" onclick="next()"> <input type="button" value="後退" onclick="back()"> <input type="button" value="返回到首頁" onclick="goPage()"> </body> <script> alert(history.length); function next(){ history.forward(); } function back(){ history.back(); } function goPage(){ history.go(-2); } </script> </html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>第四個頁面</h1>
<input type="button" value="後退" onclick="back()">
</body>
<script>
alert(history.length);
function back(){
history.back();
}
</script>
</html>