HTML5 pushstate和SEO鏈接

Question

我嘗試在我的網站上實現pushstate歷史記錄，以便從index.php容器內的single.php頁面加載內容。

我的網站有兩個主頁：index.php和single.php。

在index.php有調用pushState的腳本鏈接：

<a class="phplink" href="/Formlabs-3D-printer" title="Formlabs 3D printer">Post 12</a> 
<a class="phplink" href="/Minimal-Bumper-for-iPhone-5" title="Minimal Bumper for iPhone 5">Post 11</a> 

在我的single.php頁我用isset get方法來動態加載對應於點擊的index.php鏈接內容：

<?php 
if (isset($_GET["page"])) { 
//I do some stuff in order to echo content 
?> 

在我的.htaccess文件我重寫URL鏈接（其原因是，在index.php文件鏈接是清洗）：

Options +FollowSymLinks 
RewriteEngine on 
RewriteRule /([a-zA-Z0-9\-]+)$ /index.php 
RewriteRule /([a-zA-Z0-9\-]+)$ /single.php?page=$1 [L] 

這裏我pushState的腳本：

$.ajaxSetup({cache:false}); 
$(".phplink").click(function(){ 
    var $post_link = $(this); 
    load_content($post_link.attr('title'),$post_link.attr('href')); 
    return false; 
}); 

window.onpopstate = function(event) { 
    if (event.state) { 
     load_content(event.state.title, window.location.pathname, true); 
    } else { 
     var stateObj = { 
     title: document.title, 
     url: window.location.pathname, 
     }; 
    url = window.location.pathname; 
    load_content(url,url); 
    } 
} 

function load_content(title,url,skipHistory) { 
    $.get(url,function (data) { 
     document.title = title; 
     var stateObj = { 
      title: title, 
      url: url 
      }; 
     if (!skipHistory) { 
      if (typeof window.history.pushState == 'function') { 
       window.history.pushState(stateObj,title,url); 
      } 
     } 
     if(url.substring(1) != '') { 
      $("#ajaxify_container").html("loading..."); 
      $("#ajaxify_container").load('single.php?page='+url.substring(1)+' #container-2'); 
     } 
     else { 
      $("#ajaxify_container").html(''); 
     } 
    }); 
} 

我pushState的腳本作品上加載鏈接點擊的內容（上.phplink點擊）。 它也適用於後退/前進按鈕。

1st問題：當我刷新瀏覽器（在url中使用pushstate鏈接）時，它適用於谷歌瀏覽器（從single.php加載內容到index.php容器），但在IE10中沒有（沒有加載任何東西，它停留在index.php頁面）。

第二個問題：如果我禁用JavaScript以查看googlebot（針對SEO）會發生什麼情況。我無法加載/到達single.php頁面，它始終停留在index.php上。所以single.php頁面不能被搜索引擎抓取（我想，但我不確定）。 這種行爲是正常的，因爲我在我的.htaccess文件中設置了「所有這些鏈接」將重定向到index.php。

我這樣做，因爲沒有它pushState加載single.php頁面時，我刷新。我不想要這種行爲。我想刷新它時，只需將single.php中的內容加載到index.php容器中。

所以我的主要問題（問題2）是：我不知道如何編寫我的腳本或我的鏈接在我的PHP頁面，以便加載我的index.php文件中的內容，當我點擊時，我刷新和我後退前進。

在pushstate的常規行爲中，瀏覽器刷新時，onpopstate可以將頁面內容加載到其他頁面的容器中（從single.php加載內容到index.php的容器中）？

我希望有人能幫我解釋它是如何工作的。我很難理解它如何與鏈接一起工作。

對不起，我的英語，我是法國人...

Answer 1

我找到了一種方法，使它的偉大工程！

我做了使用pushState的支持HTML5的Web瀏覽器與HTML4 Web瀏覽器（它的工作原理，因爲IE8）的hashbang後備

要解決該刷新瀏覽器問題（不使用在.htaccess重寫規則）的腳本，我在single.php頁面的頭部添加一個腳本，以便在獲取窗口的路徑名的同時重定向到index.php（只有當您啓用javascript時）。

的single.php腳本（在頭部，在頭頂！）：

self.name= window.location.pathname; 
window.location.replace("."); 

的腳本pushState的和hashbang回退：

if(self.name){ 
    refreshdocumenttitle = document.title; 
    refrestitle = self.name; 
    refreshurl = self.name; 
    if (typeof(window.history.pushState) == 'function') { 
     refrestitle = self.name.substring(1).replace(/-/g," "); 
     refreshurl = self.name.replace("#!", ""); 
    }else { 
     window.location.hash = '#!' + refreshurl.substring(1); 
    } 
    load_content(refrestitle, refreshurl); 
} 

$(document).on('click','.link', function(){ 
    link= $(this); 
    if (!link.hasClass('current')) { 
     $(".link").removeClass('current'); 
     link.addClass('current'); 
     $post_link = link; 
     load_content($post_link.attr('title'),$post_link.attr('href')); 
     return false; 
    } 
     return false; 
}); 

window.onpopstate = function(event) { 
    $(".link").removeClass('current'); 
    url = window.location.hash; 
    if (url != '') {  
      title = url.substring(2).replace(/-/g," "); 
      url = "/" + url.replace("#!", ""); 
      load_content(title,url); 
    } 
    if (event.state) { 
     load_content(event.state.title, window.location.pathname, true); 
    } else { 
     if (!self.name) { 

      if (typeof refrestitle !== 'undefined') { 
       pathname = window.location.pathname; 
        if (pathname == "/") { 
         document.title = refreshdocumenttitle; 
        } 
      }   
      var stateObj = { 
       title: document.title, 
       url: window.location.pathname, 
       }; 
      window.history.replaceState(stateObj,document.title,window.location.pathname); 
      load_content(document.title, window.location.pathname, true); 
     }  
    } 
    self.name= ''; 
} 

$(window).on('hashchange', function() { 
    if (typeof(window.history.pushState) !== 'function') { 
     var hash = "/" + location.hash.replace("#!", ""); 
     if(window.location.hash) { 
      load_content(hash.substring(1).replace(/-/g," "), hash); 
     } else { 
      load_content("", "") 
     } 
    self.name= ''; 
    } 
}) 
$(window).trigger('hashchange'); 

function load_content(title,url,skipHistory) { 
    $.get(url,function (data) { 
     document.title = title; 
     var stateObj = { 
      title: title, 
      url: url 
     }; 
     if (!skipHistory) { 
      if (typeof(window.history.pushState) == 'function') { 
       window.history.pushState(stateObj,title.replace(/-/g," "),url); 
      }else { 
       if(url != "") { 
        window.location.hash = '#!' + url.substring(1); 
       } 
      } 
     } 
     if( window.location.hash != "" || window.location.pathname != "/") { 
      $("#ajaxify_container").html("loading..."); 
      $("#ajaxify_container").load('single.php?page='+url.substring(1)+' #container-2');  
     } 
     else { 
      $("#ajaxify_container").html("");  
     } 
    }); 
} 

在此腳本，如果路徑名有hashbang或者它只是一個正常路徑，我檢查負載。如果瀏覽器可以支持pushstate，我將hashbang更改爲普通路徑名。 如果瀏覽器不支持pushstate，並且路徑名有一個正常的路徑名，我添加一個hashbang。

然後，對於HTML5歷史記錄，我使用onpopstate和HTML4我使用hashchange支持back，prev按鈕和刷新瀏覽器（因爲我的腳本在single.php頁面的頭部）。

如果JavaScript被禁用，或者如果瀏覽器無法處理hashbang或pushState的，單頁可以正常加載，並且所有必要的信息都顯示像一個正常的頁面。

所以，所有的東西都可以用或不用javascript。這是SEO友好！ Googlebot利用每個動態single.php頁面的正確內容抓取我的所有鏈接！