HTML5 pushstate 和 SEO 链接

Question

我尝试在我的网站上实现 pushstate 历史记录，以便从 index.php 容器内的单个.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 点击）时加载内容。 它也适用于后退/前进按钮。

第一个问题：当我刷新浏览器（在 url 中带有 pushstate 链接）时，它可以在 google chrome 上运行（将内容从 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

我找到了一种让它运作良好的方法！

我为 HTML5 网络浏览器制作了一个使用 pushstate 的脚本，并在 HTML4 网络浏览器中使用 hashbang 回退（它从 IE8 开始工作）

为了解决刷新浏览器问题（不使用 .htaccess 中的重写规则），我在 single.php 页面的头部添加了一个小脚本，以便重定向（仅当您启用了 javascript）到 index.php 而获取窗口的路径名。

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 来支持后退、上一个按钮和刷新浏览器（因为我的脚本位于 single.php 页面的头部）。

如果禁用了javascript，或者浏览器无法处理hashbang或pushstate，则可以正常加载单个页面，并像正常页面一样显示所有必要的信息。

所以无论有没有 javascript，一切都可以正常工作。它是 SEO 友好的！ Googlebot 用每个动态 single.php 页面的正确内容抓取了我所有的链接！