溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關HTML5中History API如何實現無刷新跳轉 ，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
有一次在上**網的時候，發現登陸、注冊動畫效果非常華麗，但讓我感到震驚的是頁面竟能夠實現無刷新跳轉（已改版，觀看此效果可以猛擊此處：GitHub或閱FM），回顧了所學的前端知識，似乎沒有任何技術可以實現這一點，于是百度了一下，才發現這原來是使用HTML5中History API實現的效果，但奈何一直未曾派上用場。直到博客改版時，才將這一技術應用起來。
在HTML5中，
1. 新增了通過JS在瀏覽器歷史記錄中添加項目的功能。
2. 在不刷新頁面的前提下顯示改變瀏覽器地址欄中的URL。
3. 添加了當用戶單擊瀏覽器的后退按鈕時觸發的事件。
通過以上三點，可以實現在不刷新頁面的前提下動態改變瀏覽器地址欄中的URL，動態顯示頁面內容。
比如： 當頁面A和頁面B內容不一樣的時候，在HTML5之前，如果從頁面A切換到頁面B時，需要在瀏覽器下從頁面A切換到頁面B，或者說，如果需要有后退按鈕功 能的話，可以在URL地址加#XXXX 可以實現后退功能。那么現在在HTML5中，可以通過History API實現如下處理即可：
1. 在A頁面 通過發AJAX請求 請求頁面中的B數據。
2. 在頁面A中通過JS裝載相應的信息到相應的位置來。
3. 通過History API在不刷新頁面的情況下在瀏覽器的地址欄中從頁面A的URL地址切換到頁面B的URL地址。
HTML4中的History API
屬性
1.length 歷史的項數。javascript 所能管到的歷史被限制在用瀏覽器的“前進”“后退”鍵可以去到的范圍。本屬性返回的是“前進”和“后退”兩個按鍵之下包含的地址數的和。
方法
1.back() 后退，跟按下“后退”鍵是等效的。
2.forward() 前進，跟按下“前進”鍵是等效的。
3.go() 用法：history.go(x)；在歷史的范圍內去到指定的一個地址。如果 x < 0，則后退 x 個地址，如果 x > 0，則前進 x 個地址，如果 x == 0，則刷新現在打開的網頁。history.go(0) 跟 location.reload() 是等效的。
HTML5中的History API
1. history.pushState(data, title [, url])：往歷史記錄堆棧頂部添加一條記錄；data會在onpopstate事件觸發時作為參數傳遞過去；title為頁面標題，當前所有瀏覽器都會 忽略此參數；url為頁面地址，可選，缺省為當前頁地址。
2. history.replaceState(data, title [, url]) ：更改當前的歷史記錄，參數同上。
3. history.state：用于存儲以上方法的data數據，不同瀏覽器的讀寫權限不一樣。
4. popstate事件：當用戶單擊瀏覽器的后退或者前進按鈕時觸發該事件。在事件處理函數中讀取觸發事件的事件對象的state屬性值，該屬性值即為執行pushState方法時所使用的第一個參數值，其中保存了在向瀏覽器歷史記錄中添加記錄同步保存的對象。
到目前為止，IE10，firefox4以上的版本，Chrome8以上的版本，Safari5，Opera11以上的版本瀏覽器支持HTML5中的History API。
HTML:
代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<style>
ul,li{list-style:none;}
.container{width:px;border:px solid #ccc;overflow:hidden;}
.container ul{float:left;width:px;}
.container li{width:px;height:px;line-height:px;overflow:hidden;}
.container li a{text-decoration:none;}
.container li.current a{color:red;}
.all-content{width:px;float:left;overflow:hidden;}
</style>
<script src="jquery-...min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="container">
<ul class="list">
<li>
<a href="http://localhost/html/index.php">測試</a>
</li>
<li>
<a href="http://localhost/html/index.php">測試</a>
</li>
<li>
<a href="http://localhost/html/index.php">測試</a>
</li>
</ul>
<div class="all-content">
<ul class="content">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>JS:
代碼如下:
/**
* HTML history and ajax
*/
$(function(){
var ajax,
currentState;
$('.container li').unbind().bind('click',function(e){
e.preventDefault();
var target = e.target,
url = $(target).attr('href');
!$(this).hasClass('current') && $(this).addClass('current').siblings().removeClass("current");
if(ajax == undefined) {
currentState = {
url: document.location.href,
title: document.title,
html: $('.content').html()
};
}
ajax = $.ajax({
type:'POST',
url: url,
dataType:'json',
success: function(data){
var html = '';
if(data.length > ) {
for(var i = , ilist = data.length; i < ilist; i++) {
html += '<li>' +data[i].age+ '</li>' +
'<li>' +data[i].name+ '</li>' +
'<li>' +data[i].sex+ '</li>';
}
$('.content').html(html);
}
var state = {
url: url,
title: document.title,
html: $('.content').html()
};
history.pushState(state,null,url);
}
});
});
window.addEventListener('popstate',function(event){
if(ajax == null){
return;
}else if(event && event.state){
document.title = event.state.title;
$('.content').html(event.state.html);
}else{
document.title = currentState.title;
$('.content').html(currentState.html);
}
});
});關于“HTML5中History API如何實現無刷新跳轉 ”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
