Question

我已从https://github.com/browserstate/history.js下载了zip，然后在我的网络应用程序中上传了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>

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

Answer 1

您需要包含history.html4.js脚本，以便在html4浏览器中使用历史记录。

使用后退和前进按钮时，会触发statechange事件。如果你想让后退和前进按钮工作，你必须在statechange处理程序中进行ajax调用和DOM操作。

另请注意，调用statechange时会触发pushstate。您只需点击活动pushstate即可处理statechange事件中的所有内容。

Answer 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

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

2 个答案: