3

I have downloaded the zip from https://github.com/browserstate/history.js and then uploaded the browserstate-history.js-e84ad00\scripts\uncompressed\history.js in my web application. I am using an html to test this. Following is the script kept in the 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>

Here goes the body part:

<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>

The text inside div with id "data" is changed using ajax. This works fine in Mozilla 15.0.1 but when I tested it in IE 8, the history functionality is not working and I am not going back to the previous state. Instead, I am going back to the previous page which called my html. In one of the forums, the suggested solution was to include History.js, which I have included. Is there anything else that I am missing out?

4

2 回答 2

0

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

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

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

于 2012-10-10T13:24:16.623 回答
0

@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

于 2012-10-11T06:33:22.327 回答