無法使用History.js實現歷史記錄

我已經從https://github.com/browserstate/history.js下載了zip，然後在我的web應用程序中上傳browserstate-history.js-e84ad00 \ scripts \ uncompressed \ history.js。我正在使用html來測試這個。以下是保存在html中的腳本。無法使用History.js實現歷史記錄

<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爲「數據」格中的文本是用AJAX改變。這在Mozilla 15.0.1中工作正常，但是當我在IE 8中測試它時，歷史功能不起作用，我不回到以前的狀態。相反，我要回到上一頁，它調用了我的html。在其中一個論壇中，建議的解決方案是包括我已經包含的History.js。還有什麼我錯過了嗎？

來源

2012-10-10 nevin

您需要包含history.html4.js腳本才能使歷史記錄在html4瀏覽器中工作。

使用後退和前進按鈕時，會觸發statechange事件。如果您想要後退和前進按鈕，您必須在statechange處理程序中執行您的ajax調用和DOM操作。

還要記住當調用pushstate時會觸發statechange。您在點擊事件中所要做的就是致電pushstate，然後處理statechange事件中的所有內容。

來源

2012-10-10 13:24:16 Shikyo

@Shikyo：謝謝你的回答。我已經相應地修改了腳本，這就是它現在的樣子。僅供參考，這是工作在Firefox，現在甚至在鉻（它不是在更早鉻工作）

<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和歷史.js

來源

2012-10-11 06:33:22 nevin

通過向我的html添加Doctype來解決此問題。 :) – nevin

無法使用History.js實現歷史記錄

回答

相關問題