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

history.length 回傳瀏覽器 (broswer) 走過頁面的長度。



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


這裡我們用 slength() 函數在 id 屬性為 show 的元素中顯示 history.length
function slength() {
    var s = document.getElementById("show");
    s.innerHTML = window.history.length;
}


然後在 wback() 、 wnext() 、 wgo() 呼叫 slength() 。


我們利用三個 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_15__2 走到 window005_2.html ,我們按下 BACK ,就會顯示 length



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

沒有留言: