JavaScript的History API使搜索引擎抓取AJAX內(nèi)容
大家在瀏覽Facebook的相冊時有沒有發(fā)現(xiàn)，頁面局部刷新的同時地址欄的地址也改變了，而且不是hash的方式。它使用的就是HTML5 history新增的幾個API，作為window的一個全局變量，在HTML4的時代history已不是什么新鮮的事物了。我們經(jīng)常使用的就有 history.back()以及history.go() 。
我一直以為沒有辦法做到，直到前兩天看到了Discourse創(chuàng)始人之一的Robin Ward的解決方法，不禁拍案叫絕。
Discourse是一個論壇程序，嚴重依賴Ajax，但是又必須讓Google收錄內(nèi)容。它的解決方法就是放棄井號結(jié)構(gòu)，采用 History API。
所謂 History API，指的是不刷新頁面的情況下，改變?yōu)g覽器地址欄顯示的URL(準確說，是改變網(wǎng)頁的當前狀態(tài))。這里有一個例子，你點擊上方的按鈕，開始播放音樂。然后，再點擊下面的鏈接，看看發(fā)生了什么事？
地址欄的URL變了，但是音樂播放沒有中斷！
History API 的詳細介紹，超出這篇文章的范圍。這里只簡單說，它的作用就是在瀏覽器的History對象中，添加一條記錄。
window.history.pushState(state object, title, url);
上面這行命令，可以讓地址欄出現(xiàn)新的URL。History對象的pushState方法接受三個參數(shù)，新的URL就是第三個參數(shù)，前兩個參數(shù)都可以是null。
window.history.pushState(null, null, newURL);
目前，各大瀏覽器都支持這個方法：Chrome（26.0+），F(xiàn)irefox（20.0+），IE（10.0+），Safari（5.1+），Opera（12.1+）。
下面就是Robin Ward的方法。
首先，用History API替代井號結(jié)構(gòu)，讓每個井號都變成正常路徑的URL，這樣搜索引擎就會抓取每一個網(wǎng)頁。
example.com/1
example.com/2
example.com/3
然后，定義一個JavaScript函數(shù)，處理Ajax部分，根據(jù)網(wǎng)址抓取內(nèi)容（假定使用jQuery）。
function anchorClick(link) {
var linkSplit = link.split('/').pop();
$.get('api/' + linkSplit, function(data) {
$('#content').html(data);
});
}
再定義鼠標的click事件。
$('#container').on('click', 'a', function(e) {
window.history.pushState(null, null, $(this).attr('href'));
anchorClick($(this).attr('href'));
e.preventDefault();
});
還要考慮到用戶點擊瀏覽器的"前進 / 后退"按鈕。這時會觸發(fā)History對象的popstate事件。
window.addEventListener('popstate', function(e) {
anchorClick(location.pathname);
});
定義完上面三段代碼，就能在不刷新頁面的情況下，顯示正常路徑URL和AJAX內(nèi)容。
最后，設(shè)置服務(wù)器端。
因為不使用井號結(jié)構(gòu)，每個URL都是一個不同的請求。所以，要求服務(wù)器端對所有這些請求，都返回如下結(jié)構(gòu)的網(wǎng)頁，防止出現(xiàn)404錯誤。
<html> <body> <section id='container'></section> <noscript> ... ... </noscript> </body> </html>
仔細看上面這段代碼，你會發(fā)現(xiàn)有一個noscript標簽，這就是奧妙所在。
我們把所有要讓搜索引擎收錄的內(nèi)容，都放在noscript標簽之中。這樣的話，用戶依然可以執(zhí)行AJAX操作，不用刷新頁面，但是搜索引擎會收錄每個網(wǎng)頁的主要內(nèi)容！
相關(guān)文章
下面的代碼注意實現(xiàn)先判斷l(xiāng)i是否有樣式，如果沒有，就添加一個樣式，原理呢，就是批量檢測li的className屬性2008-09-09
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點添加滑塊的方式。這篇文章主要介紹了使用BootStrap進行輪播圖的制作的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)涂鴉筆功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JS實現(xiàn)超精簡響應(yīng)鼠標顯示二級菜單代碼
這篇文章主要介紹了JS實現(xiàn)超精簡響應(yīng)鼠標顯示二級菜單代碼,可實現(xiàn)針對鼠標事件的響應(yīng)動態(tài)修改頁面元素屬性的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
這篇文章主要給大家介紹了關(guān)于H5頁面跳轉(zhuǎn)小程序的3種實現(xiàn)方式,說出來你可能不信,每位商家?guī)缀醵紩5轉(zhuǎn)跳到小程序、H5轉(zhuǎn)跳至小程序的應(yīng)用范圍十分廣闊,需要的朋友可以參考下2023-08-08
JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于如何從JavaScript數(shù)組中刪除空對象的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
本文主要對JavaScript中promise的使用進行詳細介紹。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要給大家介紹了關(guān)于JavaScript中變量提升和函數(shù)提升的相關(guān)資料,以及JS變量提升和函數(shù)提升的順序,文中給出了詳細的介紹,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了javascript獲取系統(tǒng)當前時間的方法，格式為：2015年11月19日 星期四09:21:05，需要的朋友可以參考下2015-11-11
JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法的具體區(qū)別詳
在JavaScript中數(shù)組是一種非常常見且功能強大的數(shù)據(jù)結(jié)構(gòu),這篇文章主要介紹了JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法具體區(qū)別的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04