history
history 對象
- back() 返回到歷史記錄上一個頁面
- forward() 返回到歷史記錄下一個頁面
- go() 返回到歷史記錄多步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="14.history.html">頁面1</a>
<a href="14.history_2.html">頁面2</a>
<a href="14.history_3.html">頁面3</a>
<div>這是頁面1</div>
<button id="btn">按鈕</button>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="14.history.html">頁面1</a>
<a href="14.history_2.html">頁面2</a>
<a href="14.history_3.html">頁面3</a>
<div>這是頁面2</div>
<button id="btn">按鈕</button>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="14.history.html">頁面1</a>
<a href="14.history_2.html">頁面2</a>
<a href="14.history_3.html">頁面3</a>
<div>這是頁面3</div>
<button id="btn">按鈕</button>
<script>
{
let btn = document.querySelector("#btn");
btn.onclick = function(){
history.back();
};
}
</script>
</body>
</html>
history.back()； 返回到歷史記錄上一個頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="14.history.html">頁面1</a>
<a href="14.history_2.html">頁面2</a>
<a href="14.history_3.html">頁面3</a>
<div>這是頁面1</div>
<button id="btn">按鈕</button>
<script>
{
let btn = document.querySelector("#btn");
btn.onclick = function(){
history.forward();
};
}
</script>
</body>
</html>
history.forward()； 返回到歷史記錄下一個頁面
history.go(num)； 返回到歷史記錄多步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="14.history.html">頁面1</a>
<a href="14.history_2.html">頁面2</a>
<a href="14.history_3.html">頁面3</a>
<div>這是頁面3</div>
<button id="btn">按鈕</button>
<script>
{
let btn = document.querySelector("#btn");
btn.onclick = function(){
// history.back();
history.go(-2);
};
}
</script>
</body>
</html>
直接回退兩步，如果正數則前進多步
（後續待補充）