HTML DOM 快速導覽 - window 物件的屬性 history

window.history 回傳 history 物件，其記錄瀏覽器 (broswer) 走過的頁面。



雖然這裡的 history 為 window 的屬性，然而 history 也可以單獨當成物件使用。


history 有以下的屬性 (attribute) 與方法 (method)
名稱描述
length記錄走過的頁面數量
back()載入上一次走過的頁面
forward()載入下一個走過的頁面
go(n)依參數載入走過的頁面， n 為負數往回走，正數往前走


舉例如下
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 月 */


我們利用三個 HTML 文件載入 window005.js ，以下為 window005.html
<!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
<!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
<!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 ，網頁轉換到 window005_2.html



點擊 5__2 ，網頁轉換到 window005_1.html



接著就可利用 BACK 回到上一頁， NEXT 到下一頁， GO-2 回到前兩頁了。


中英文術語對照
瀏覽器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)