7

まず第一に、私がしていることや期待していることが正しいかどうかは完全にはわかりません。これに関するドキュメントはあまりないようですが、私が読んだことは、これが機能するはずであることを示唆しています。

history.pushStateを使用しようとしたときにいくつかの問題が発生したため、何が問題になっているのかを確認するためのデモページを作成することになりました。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>
<script>

window.onpopstate = function()
{
    var d = new Date;
    console.log(d.toString());
    console.log(document.location.href);
};

$(document).ready(function()
{

    $('#push').click(function()
    {
        var rand = Math.random();
        history.pushState( {'number':rand} , 'Test '+rand , '/test/'+rand );
        return false;
    });

});

</script>

</head>

<body>

<a href="#" id="push">New state</a>

</body>
</html>

[新しい状態]リンクをクリックすると、コンソールにonpopstate関数が実行され、新しいURL（test / [number]など）が表示されることを期待しています。

Chromeのアドレスバーの場所は更新されますが、onpopstateイベントは発生しません。次に、ブラウザの[戻る]ボタンをクリックすると、複数のポップステートイベントが発生しているように見えます。ブラウザのナビゲーションボタンを使用するたびに、発生するはずのすべてのpopstateイベントが一度に発生しているようです。

これを説明するのはちょっと難しいです。これが私がコンソールに表示することを期待しているものです。

ページをロードします。Chromeは、ページの読み込み時に最初のpopstateイベントを発生させます

popstate.html：132011年11月19日土曜日16:23:48 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

「新しい状態」リンクをクリックします。アドレスバーの場所がhttp://example.com/test/0.06458491436205804に更新されます。

2011年11月19日土曜日16:23:53GMT+ 0000（GMT標準時）

popstate.html：14http：//example.com/test/0.06458491436205804

ブラウザの戻るボタンをクリックします。アドレスバーのURLは/popstate.htmlに戻ります

popstate.html：132011年11月19日土曜日16:26:27 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

それが私が期待していることです。これが私が実際に見ているものです...

ページを読み込む

popstate.html：132011年11月19日土曜日16:27:42 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

新しい状態のリンクをクリックします。コンソールには何も表示されません。アドレスバーが/test/0.5458911096211523に変わります

ブラウザの戻るボタンをクリックします。アドレスが/popstate.htmlに戻ります

popstate.html：132011年11月19日土曜日16:27:42 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

popstate.html：132011年11月19日土曜日16:28:57 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

ご覧のとおり、最初のpopstateを繰り返し、/ popstate.htmlに戻ることを示していますが、プッシュされた状態に対しては起動しません。ブラウザで前方に押すと、次のようになります。

popstate.html：132011年11月19日土曜日16:27:42 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

popstate.html：132011年11月19日土曜日16:28:57 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/popstate.html

popstate.html：132011年11月19日土曜日16:29:58 GMT + 0000（GMT標準時）

popstate.html：14http：//example.com/test/0.5458911096211523

（それらはすべて再び表示されます。スクリーンショットは次のとおりです：http：//img.ctrlv.in/4ec7da04e20d3.jpg）

間違っているのか、期待が間違っているのか、それとも実際にはバグなのかわかりません。

このすべてを読んで、私のためにそれに光を当てることができる人に事前に感謝します。

4

2 に答える 2

3

他のページに移動するとき、 Chromeconsole.logは物事をうまく処理できません。これは、他のタイムスタンプで一度に複数のログを記録するため、確認できます（これは不可能です）。$("body").appendここにログを記録する（または他の要素に追加する）ために使用することをお勧めします。

次に、状態をプッシュすると、明らかにポップされないため、popstateイベントはトリガーされません。onpopstate状態をプッシュしているときにもハンドラーをトリガーする場合は、次のような単純なラッパーを作成できます：http: //jsfiddle.net/vsb23/2/。

function load(url, state) { // logging function; normally load AJAX stuff here
    $("pre").append(new Date
                    + "\n" + url
                    + "\n" + JSON.stringify(state) // to log object as string
                    + "\n\n");
}

function pushState(data, title, url) {
    history.pushState(data, title, url);
    load(location.href, data); // call load function when pushing as well
}

window.onpopstate = function(e) {
    load(location.href, e.state);
};

$("button").click(function() {
    pushState({foo: "bar"}, "test", "/test?a=b"); // sample push
});

編集：これはすでにChromiumバグトラッカーのバグです。

于 2011-11-19T16:55:58.373 に答える
1 
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1 !== true) {
    runpopState();
}

function runpopState() {
    alert("POP STATE");
}

window.onpopstate = function () {
    runpopState();
};

彼らがバグを修正するまで、このような解決策で十分です。

于 2012-07-02T05:41:23.343 に答える