溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“HTML5中history API的示例分析”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“HTML5中history API的示例分析”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
HTML5 history API介紹
history是個全局變量，即window.history
屬性和方法如下：
length：歷史堆棧中的記錄數。
back()： 返回上一頁。
foward()： 前進到下一頁。
go([delta])： delta是數字，如果為0或為空則刷新本頁，如果正數則前進[delta]頁，如負數則后退[delta]頁。
HTML5添加了以下兩個方法：
pushState(data, title, [,url])：在歷史堆棧頂部插入一條記錄。
data為一個對象或null，會在window的popstate事件(window.onpopstate)時，作為state參數傳遞過去。
title為頁面的標題，當前所有瀏覽器都忽略這個參數。
url 為頁面url，不寫則為當前頁。
replaceState(data, title, [,url])：更改當前頁面的歷史記錄。這種更改不會去訪問該URL。
replaceState()的URL參數必須和當前頁的協議（如HTTP、HTTPS）和域名完全相同（使用不同的子域都不行）
目前只有Safari 5.0+、Chrome 8.0+、Firefox 4.0+和iOS 4.2.1+支持。如果想兼容老瀏覽器的話，可以試試History.js，而且它還修正了一些bug。
pushState 與 replaceState 使用：
<?php
$photo = isset($_GET['id'])? $_GET['id'] : 1;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">
function go(c){
document.title = 'test' + c; //更改title
window.history.pushState({'title':'test'+c, 'photo':c}, 'test'+c, 'test.php?id='+c); // 插入前一頁歷史記錄
window.history.replaceState({'title':'test'+c, 'photo':c},'test'+c, 'test.php?id='+c); // 更改當前歷史記錄
document.getElementById("photo").src = c + '.jpg';
}
window.onpopstate = function(obj){
if(obj.state!=null){
document.title = obj.state.title; // 后退時更新title
document.getElementById("photo").src = obj.state.photo + '.jpg';
}
}
</script>
</head>
<body>
<p>
<a href="javascript:void(0)" onclick="go(1)">page 1</a>
<a href="javascript:void(0)" onclick="go(2)">page 2</a>
<a href="javascript:void(0)" onclick="go(3)">page 3</a>
<a href="javascript:void(0)" onclick="go(4)">page 4</a>
</p>
<p><img src="<?=$photo ?>.jpg" id="photo"></p>
</body>
</html>window.onpopstate方法：
window.onpopstate = function(event){
alert(event.state);
}以上是“HTML5中history API的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
