Window-history對象

history對象

包含用戶(在瀏覽器窗口中)訪問過的 URL。

History 對象是 window 對象的一部分,可通過 window.history 屬性對其進行訪問。

注意:沒有應用於 History 對象的公開標準,不過所有瀏覽器都支持該對象。

History 對象屬性

1. length

聲明瞭瀏覽器歷史列表中的元素數量

注意:Internet Explorer和Opera從0開始,而Firefox、Chrome和Safari從1開始。

瀏覽器支持

google IE firefox safari opera
true true true true true

history.length

document.write("歷史列表中URL的數量: " + history.length);

History 對象方法

1. back

可加載歷史列表中的前一個 URL(如果存在)

調用該方法的效果等價於點擊後退按鈕或調用 history.go(-1)。

瀏覽器支持

google IE firefox safari opera
true true true true true

history.back()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zsh</title>
    <script>
        function goBack(){
            window.history.back()                               document.write(document.body.innerHTML +="歷史列表中URL的數量: " + history.length);
        }
    </script>
</head>
<body>

<input type="button" value="返回" onclick="goBack()">
<a href="#" target="_self">點我點我</a>
</body>
</html>

2. forward

可加載歷史列表中的下一個 URL(如果存在)

調用該方法的效果等價於點擊前進按鈕或調用 history.go(1)。

瀏覽器支持

google IE firefox safari opera
true true true true true

history.forward()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zsh</title>
    <script>
        function goBack(){
            window.history.back()
            document.write(document.body.innerHTML +="歷史列表中URL的數量: " + history.length);
            goBack = function(){
                window.history.forward();
                document.write("現在前進了");
            }
        }

    </script>
</head>
<body>

<input type="button" value="返回" onclick="goBack()">
<a href="#" target="_self">點我點我</a>
</body>
</html>

3. go

可加載歷史列表中的某個具體的頁面

該參數可以是數字,使用的是要訪問的 URL 在 History 的 URL 列表中的相對位置。(-1上一個頁面,1前進一個頁面)。或一個字符串,字符串必須是局部或完整的URL,該函數會去匹配字符串的第一個URL。

瀏覽器支持

google IE firefox safari opera
true true true true true

history.go(number|URL)

參數

  • 必需
    • number 使用的是要訪問的 URL 在 History 的 URL 列表中的相對位置。(-1上一個頁面,1前進一個頁面) 或者 URL 字符串必須是局部或完整的URL,該函數會去匹配字符串的第一個URL。
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>zsh</title> 
<script> 
function goBack(){ 
    window.history.go(-2) 
} 
</script> 
</head> 
<body> 

<input type="button" value="後退2頁" onclick="goBack()"> 

</body> 
</html>
    </script>
</head>
<body>

<input type="button" value="返回" onclick="goBack()">
<a href="#" target="_self">點我點我</a>
</body>
</html>

文檔內容出自 W3cSchool和菜鳥教程,
如需查看更詳細的有關內容 請登錄 http://www.w3school.com.cn/http://www.runoob.com/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章