3

https://github.com/browserstate/history.jsからzipをダウンロードしてから、browserstate-history.js-e84ad00 \ scripts \ uncompressed\history.jsをWebアプリケーションにアップロードしました。私はこれをテストするために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を使用して変更されます。これはMozilla15.0.1では正常に機能しますが、IE 8でテストしたところ、履歴機能が機能せず、以前の状態に戻りません。代わりに、htmlと呼ばれる前のページに戻ります。フォーラムの1つで、提案された解決策は、私が含めたHistory.jsを含めることでした。私が見逃しているものは他にありますか？

4

2 に答える 2

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 に答える
0

history.html4.jshtml4 ブラウザーで履歴を機能させるには、スクリプトを含める必要があります。

戻るボタンと進むボタンを使用すると、statechangeイベントがトリガーされます。戻るボタンと進むボタンを機能させたい場合は、statechangeハンドラー内で ajax 呼び出しと DOM 操作を行う必要があります。

が呼び出されたstatechangeときにトリガーされることも覚えておいてください。pushstateクリック イベントで行う必要があるのは、呼び出しpushstateて、イベント内のすべてを処理することだけstatechangeです。

于 2012-10-10T13:24:16.623 に答える