History.js에서 기록을 구현할 수 없습니다.

https://github.com/browserstate/history.js에서 zip을 다운로드 한 다음 내 웹 응용 프로그램에서 browserstate-history.js-e84ad00 \ scripts \ uncompressed \ history.js를 업로드했습니다. 나는 이것을 테스트하기 위해 html을 사용하고있다. 다음은 html에 보관 된 스크립트입니다.History.js에서 기록을 구현할 수 없습니다.

<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 "데이터"와 DIV 안의 텍스트 Ajax를 사용하여 변경된다 :

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

여기서 본체 부 간다. 이것은 Mozilla 15.0.1에서 잘 작동하지만 IE 8에서 테스트했을 때 히스토리 기능이 작동하지 않고 이전 상태로 돌아 가지 않을 것입니다. 대신, 나는 html이라는 이전 페이지로 돌아갈 것이다. 포럼 중 하나에서 제안 된 솔루션은 내가 포함시킨 History.js를 포함하는 것이 었습니다. 제가 빠뜨린 다른 것이 있습니까?

출처

2012-10-10 nevin

html4 브라우저에서 기록 작업을 수행하려면 history.html4.js 스크립트를 포함해야합니다.

뒤로 및 앞으로 단추를 사용할 때 statechange 이벤트가 트리거됩니다. 뒤로 버튼과 앞으로 버튼을 작동 시키려면 statechange 핸들러 내에서 ajax 호출과 DOM 조작을 수행해야합니다.

pushstate을 호출하면 statechange이 트리거된다는 점도 기억하십시오. 클릭 이벤트에서 수행해야하는 작업은 pushstate이며 statechange 이벤트의 모든 내용을 처리해야합니다.

출처

2012-10-10 13:24:16 Shikyo

@Shikyo : 답변 해 주셔서 감사합니다. 그에 따라 스크립트를 수정했으며 이것이 지금의 모습입니다. 참고로,이 (가 크롬의 앞부분에서 작동하지 않는)

<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에서 기록을 구현할 수 없습니다.

답변

관련 문제