国模大胆无码私拍啪啪AV,日本胸大公妇被公侵犯中文字幕,天堂无码人妻精品一区二区三区,国产精品18禁污污网站

鄭州APP開(kāi)發(fā)
鄭州APP開(kāi)發(fā)電話(huà)
單頁(yè)面結構
2013-07-23

越來(lái)越多的網(wǎng)站，開(kāi)始采用“單頁(yè)面結構”（Single-page application）。

整個(gè)網(wǎng)站只有一張網(wǎng)頁(yè)，采用Ajax技術(shù)，根據用戶(hù)的輸入，加載不同的內容。

\

這種做法的好處是用戶(hù)體驗好、節省流量，缺點(diǎn)是AJAX內容無(wú)法被搜索引擎抓取。舉例來(lái)說(shuō)，你有一個(gè)網(wǎng)站。

http://example.com

用戶(hù)通過(guò)井號結構的URL，看到不同的內容。

http://example.com#1

http://example.com#2

http://example.com#3

但是，搜索引擎只抓取example.com，不會(huì )理會(huì )井號，因此也就無(wú)法索引內容。

為了解決這個(gè)問(wèn)題，Google提出了”井號+感嘆號”的結構。

http://example.com#!1

當Google發(fā)現上面這樣的URL，就自動(dòng)抓取另一個(gè)網(wǎng)址：

http://example.com/?_escaped_fragment_=1

只要你把AJAX內容放在這個(gè)網(wǎng)址，Google就會(huì )收錄。但是問(wèn)題是，”井號+感嘆號”非常難看且煩瑣。Twitter曾經(jīng)采用這種結構，它把

http://twitter.com/ruanyf

改成

http://twitter.com/#!/ruanyf

結果用戶(hù)抱怨連連，只用了半年就廢除了。

那么，有沒(méi)有什么方法，可以在保持比較直觀(guān)的URL的同時(shí)，還讓搜索引擎能夠抓取AJAX內容？

我一直以為沒(méi)有辦法做到，直到前兩天看到了Discourse創(chuàng )始人之一的Robin Ward的解決方法，不禁拍案叫絕。

\

Discourse是一個(gè)論壇程序，嚴重依賴(lài)Ajax，但是又必須讓Google收錄內容。它的解決方法就是放棄井號結構，采用 History API。

所謂 History API，指的是不刷新頁(yè)面的情況下，改變?yōu)g覽器地址欄顯示的URL(準確說(shuō)，是改變網(wǎng)頁(yè)的當前狀態(tài))。這里有一個(gè)例子，你點(diǎn)擊上方的按鈕，開(kāi)始播放音樂(lè )。然后，再點(diǎn)擊下面的鏈接，看看發(fā)生了什么事？

\

地址欄的URL變了，但是音樂(lè )播放沒(méi)有中斷！

History API 的詳細介紹，超出這篇文章的范圍。這里只簡(jiǎn)單說(shuō)，它的作用就是在瀏覽器的History對象中，添加一條記錄。

window.history.pushState(state object, title, url);

上面這行命令，可以讓地址欄出現新的URL。History對象的pushState方法接受三個(gè)參數，新的URL就是第三個(gè)參數，前兩個(gè)參數都可以是null。

window.history.pushState(null, null, newURL);

目前，各大瀏覽器都支持這個(gè)方法：Chrome（26.0+），Firefox（20.0+），IE（10.0+），Safari（5.1+），Opera（12.1+）。

下面就是Robin Ward的方法。

首先，用History API替代井號結構，讓每個(gè)井號都變成正常路徑的URL，這樣搜索引擎就會(huì )抓取每一個(gè)網(wǎng)頁(yè)。

example.com/1

example.com/2

example.com/3

然后，定義一個(gè)JavaScript函數，處理Ajax部分，根據網(wǎng)址抓取內容（假定使用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();
});

還要考慮到用戶(hù)點(diǎn)擊瀏覽器的”前進(jìn) / 后退”按鈕。這時(shí)會(huì )觸發(fā)History對象的popstate事件。

window.addEventListener(‘popstate’, function(e) {
anchorClick(location.pathname);
});

定義完上面三段代碼，就能在不刷新頁(yè)面的情況下，顯示正常路徑URL和AJAX內容。

最后，設置服務(wù)器端。

因為不使用井號結構，每個(gè)URL都是一個(gè)不同的請求。所以，要求服務(wù)器端對所有這些請求，都返回如下結構的網(wǎng)頁(yè)，防止出現404錯誤。

<html>
<body>
<section id=’container’></section>
<noscript>
… …
</noscript>
</body>
</html>

仔細看上面這段代碼，你會(huì )發(fā)現有一個(gè)noscript標簽，這就是奧妙所在。

我們把所有要讓搜索引擎收錄的內容，都放在noscript標簽之中。這樣的話(huà)，用戶(hù)依然可以執行AJAX操作，不用刷新頁(yè)面，但是搜索引擎會(huì )收錄每個(gè)網(wǎng)頁(yè)的主要內容！

訪(fǎng)問(wèn)手機端更方便