无法使用 History.js 实现历史记录答案

【问题标题】：Not able to implement history with History.js无法使用 History.js 实现历史记录
【发布时间】：2012-10-10 08:14:14
【问题描述】：

我已经从https://github.com/browserstate/history.js 下载了 zip，然后在我的 Web 应用程序中上传了 browserstate-history.js-e84ad00\scripts\uncompressed\history.js。我正在使用 html 来测试它。以下是保存在html中的脚本。

<script type="text/javascript">
var count=0;
$(document).ready(function(){
$("#change").click(function(){
count=count+1;
$.ajax({
    url: "fetch.html",
    cache: false,
    dataType: "html",
    success: function(responseHTML){
    wrappedResponseHTML = "<div id='responseTextWrapperDiv'>" + responseHTML + "</div>";
    $("#data").html(($(wrappedResponseHTML).find("#toggle")).html());
    history.pushState(document.getElementById("data").innerHTML, "", "?page="+count,"");
    }
});
});
$("#change2").click(function(){
count=count+1;
$.ajax({
    url: "fetch2.html",
    cache: false,
    dataType: "html",
    success: function(responseHTML){

    wrappedResponseHTML = "<div id='responseTextWrapperDiv'>" + responseHTML + "</div>";
        $("#data").html(($(wrappedResponseHTML).find("#toggle")).html());
        history.pushState(document.getElementById("data").innerHTML, "", "?page="+count,"");
        }
});
});
});
window.onpopstate = function(event) {
    document.getElementById('data').innerHTML=event.state;
    if(event.state==null)
    {
        window.location.href=window.location.href;
    }
};</script>

这是身体部分：

<body>
<div id="data">
Landing Page
</div>
<div>
    <input type="button" id="change" value="change text" />
    <input type="button" id="change2" value="change text 2" />
</div>
<div>
    <input type="button" id="back" value="go back" onclick="history.go(-1);"/>
</div></body>

id 为“data”的 div 中的文本是使用 ajax 更改的。这在 Mozilla 15.0.1 中运行良好，但是当我在 IE 8 中对其进行测试时，历史记录功能不起作用，我不会回到以前的状态。相反，我将返回调用我的 html 的上一页。在其中一个论坛中，建议的解决方案是包含我已经包含的 History.js。我还有什么遗漏的吗？

【问题讨论】：

标签： javascript jquery ajax history.js

【解决方案1】：

您需要包含 history.html4.js 脚本才能使历史记录在 html4 浏览器中工作。

当使用后退和前进按钮时，statechange 事件被触发。如果您希望后退和前进按钮正常工作，您必须在 statechange 处理程序中进行 ajax 调用和 DOM 操作。

还要记住，statechange 是在调用 pushstate 时触发的。在点击事件中您所要做的就是调用pushstate，然后在statechange 事件中处理所有事情。

【讨论】：

【解决方案2】：

@Shikyo：谢谢你的回答。我已经相应地修改了脚本，这就是它现在的样子。仅供参考，它可以在 Firefox 中运行，现在甚至可以在 chrome 中运行（它在 chrome 的早期版本中没有运行）

<script type="text/javascript">
var count=0;
$(document).ready(function(){
$("#change").click(function(){
count=count+1;
$.ajax({
    url: "fetch.html",
    cache: false,
    dataType: "html",
    success: function(responseHTML){
    wrappedResponseHTML = "<div id='responseTextWrapperDiv'>" + responseHTML + "</div>";
    $("#data").html(($(wrappedResponseHTML).find("#toggle")).html());
    //History.pushState(document.getElementById("data").innerHTML, "", "?page="+count);
    $data = { text:$("#data").html()};

    History.pushState($data, count, "?page="+count);
    }
});
});
$("#change2").click(function(){
count=count+1;
$.ajax({
    url: "fetch2.html",
    cache: false,
    dataType: "html",
    success: function(responseHTML){

    wrappedResponseHTML = "<div id='responseTextWrapperDiv'>" + responseHTML + "</div>";
        $("#data").html(($(wrappedResponseHTML).find("#toggle")).html());
        $data = { text:$("#data").html()};
        History.pushState($data, count, "?page="+count);
        }
});
});
});
History.Adapter.bind(window,'statechange',function(){
if(History.getState().data.text==null)
{
window.location.href=window.location.href;
}
    var data = History.getState().data.text;
    document.getElementById('data').innerHTML=data;
});</script>

我已经包含了 history.html4.js、json2.js、history.adapter.jquery.js 和 history.js

【讨论】：

通过将 Doctype 添加到我的 html 来解决问题。 :)