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_1 、 5__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
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)