JavaScript的History API讓搜尋引擎抓取AJAX內容_javascript技巧
- WBOY原創
- 2016-05-16 15:27:311272瀏覽
大家在瀏覽Facebook的相簿時有沒有發現，頁面局部刷新的同時網址列的位址也改變了，而且不是hash的方式。它使用的就是HTML5 history新增的幾個API，作為window的一個全域變量，在HTML4的時代history已不是什麼新鮮的事物了。我們常用的就有 history.back()以及history.go() 。
我一直以為沒有辦法做到，直到前兩天看到了Discourse創始人之一的Robin Ward的解決方法，不禁拍案叫絕。
Discourse是一個論壇程序，嚴重依賴Ajax，但是又必須讓Google收錄內容。它的解決方法就是放棄井號結構，採用 History API。
所謂 History API，指的是不刷新頁面的情況下，改變瀏覽器網址列顯示的URL(準確地說，是改變網頁的當前狀態)。這裡有一個例子，你點擊上方的按鈕，開始播放音樂。然後，再點擊下面的鏈接，看看發生了什麼事？
網址列的URL變了，但是音樂播放沒有中斷！
History API 的詳細介紹，超出這篇文章的範圍。這裡只簡單說，它的作用就是在瀏覽器的History物件中，加入一筆記錄。
window.history.pushState(state object, title, url);
上面這行指令，可以讓網址列出現新的URL。 History物件的pushState方法接受三個參數，新的URL就是第三個參數，前兩個參數都可以是null。
window.history.pushState(null, null, newURL);
目前，各大瀏覽器都支援這個方法：Chrome（26.0 ），Firefox（20.0 ），IE（10.0 ），Safari（5.1 ），Opera（12.1 ）。
下面就是Robin Ward的方法。
首先，用History API取代井號結構，讓每個井號都變成正常路徑的URL，這樣搜尋引擎就會抓取每個網頁。
example.com/1
example.com/2
example.com/3
然後，定義一個JavaScript函數，處理Ajax部分，依照網址抓取內容（假定使用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();
});
也要考慮到使用者點擊瀏覽器的"前進 / 後退"按鈕。這時會觸發History物件的popstate事件。
window.addEventListener('popstate', function(e) {
anchorClick(location.pathname);
});
定義完上面三段程式碼，就能在不重新整理頁面的情況下，顯示正常路徑URL和AJAX內容。
最後，設定伺服器端。
因為不使用井號結構，每個URL都是不同的請求。所以，要求伺服器端對所有這些請求，都回傳如下結構的網頁，防止出現404錯誤。
<html> <body> <section id='container'></section> <noscript> ... ... </noscript> </body> </html>
仔細看上面這段程式碼，你會發現有一個noscript標籤，這就是奧妙所在。
我們把所有要讓搜尋引擎收錄的內容，都放在noscript標籤之中。這樣的話，使用者依然可以執行AJAX操作，不用重新整理頁面，但搜尋引擎會收錄每個網頁的主要內容！