history.pushState無刷新改變頁面URL

列印

ajax 的特色在於部分更換網頁內容,由於只有部分更換所以很多檔案都不必重抓,像是 head 裡面的 .js, .css ...,這會提升網頁載入的速度。
但有一個致命的缺點在於網址列沒有改變,所以使用者沒辦法按上一頁回到上個狀態,以及搜尋引擎沒辦法抓到 ajax 產生的內容,因為 ajax 替換後的內容是沒有網址的。

現在可以使用history.pushState(state, title, href)來保持這些功能.

(P.S. IE9 是不支援的,Chrome、Safri 支援)

1
2
3
4
history.pushState(state, title, href)
// state 是這次推進去的堆疊狀態,可以用來紀錄這次推進去的一些資料
// title 是網頁 title
// href 是要推進去的網址,也就是網址列上顯示的網址

 

先建立function 來判斷

function save_url(data, title, href){
if (typeof(history.pushState) == 'function') {
history.pushState(data, title, href);
}}

要使用時先宣告即可

 

var data_json = {};

data_json['id'] = g_id;

data_json['get_sort'] = $('#get_sort').val();

data_json['p'] = p;

 

var m_href = WEBBASE+'uschool/index_class/'+g_id+'/1.html' + '?' + $.param(data_json);

save_url(data_json, document.title, m_href);

 

$.get(WEBBASE+'uschool/pr_list/2.html', data_json, function(res){

})

此文參考:http://kelp.phate.org/2011/10/ajax-seo.html

最近更新 ( 週日, 20 十月 2013 20:52 )