我尝试在我的网站上实现推送状态历史记录，以便从 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 点击时)。 它也适用于后退/前进按钮。

第一个问题:当我刷新浏览器(在 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 的容器中)？

我希望有人能帮助我并解释它是如何工作的。我很难理解它如何处理链接。

对不起我的英语，我是法国人......

最佳答案

我找到了一种让它运行良好的方法!

我制作了一个脚本，它在 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 页面的正确内容抓取了我的所有链接!

关于HTML5 pushstate 和 SEO 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16658895/