HTML DOM 快速導覽 - history 物件的方法 back()

history.back() 使瀏覽器 (broswer) 回到上一頁，也就是上一次拜訪過的網頁。



舉例如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function wback() {
    window.history.back();
    slength();
}
 
function wnext() {
    window.history.forward();
    slength();
}
 
function wgo() {
    window.history.go(-2);
    slength();
}
 
function t51() {
    window.location.assign("window005_1.html");
    slength();
}
 
function t52() {
    window.location.assign("window005_2.html");
    slength();
}
 
function slength() {
    var s = document.getElementById("show");
    s.innerHTML = window.history.length;
}
 
/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window005.js
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 */


這裡我們用 wback() 函數呼叫 back()
1
2
3
4
function wback() {
    window.history.back();
    slength();
}


我們利用三個 HTML 文件載入 window005.js ，以下為 window005.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="window005.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="BACK" onclick="wback();">
<input type="button" value="NEXT" onclick="wnext();">
<input type="button" value="GO-2" onclick="wgo();">
<input type="button" value="5_1" onclick="t51();">
<div>window005.html</div>
<div>length: <span id="show"></span></div>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window005.html
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


以下為 window005_1.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="window005.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="BACK" onclick="wback();">
<input type="button" value="NEXT" onclick="wnext();">
<input type="button" value="GO-2" onclick="wgo();">
<input type="button" value="5_2" onclick="t52();">
<div>window005_1.html</div>
<div>length: <span id="show"></span></div>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window005_1.html
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


以下為 window005_2.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="window005.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="BACK" onclick="wback();">
<input type="button" value="NEXT" onclick="wnext();">
<input type="button" value="GO-2" onclick="wgo();">
<div>window005_2.html</div>
<div>length: <span id="show"></span></div>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window005_2.html
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


首先開啟 window005.html ，然後利用 5_1 、 5__2 走到 window005_2.html ，我們按下 BACK ，網頁就會回到 window005_1.html



中英文術語對照
瀏覽器broswer
屬性attribute
方法method


您可以繼續參考
window 物件


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/window.history
http://msdn.microsoft.com/en-us/library/ms535864(VS.85).aspx
http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#the-history-interface
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)