138

history.replaceState の実際の例を教えてください。これはw3.orgが言うことです：

history.replaceState(data, title [, url ] )

セッション履歴の現在のエントリを更新して、指定されたデータ、タイトル、および指定されていて null でない場合は URL を保持します。

アップデート

これは完全に機能します：

history.replaceState( {} , 'foo', '/foo' );

URLは変わりますが、タイトルは変わりません。それはバグですか、それとも何か不足していますか? 最新の Chrome でテスト済み。

4

9 に答える 9

70

実際、これはバグですが、現在 2 年間意図的に行われています。問題は、いくつかの不明確な仕様と、document.title前後に移動する場合の複雑さにあります。

WebkitおよびMozillaのバグ リファレンスを参照してください。また、History API の導入に関する Opera は、title パラメータを使用していないと述べており、おそらくまだ使用していません。

現在、pushState と replaceState の 2 番目の引数 (履歴エントリのタイトル) は、Opera の実装では使用されていませんが、いつか使用される可能性があります。

考えられる解決策

私が見る唯一の方法は、タイトル要素を変更し、代わりに pushState を使用することです:

document.getElementsByTagName('title')[0].innerHTML = 'bar';
window.history.pushState( {} , 'bar', '/bar' );
于 2012-10-15T09:29:07.763 に答える
41

これは最小限の、不自然な例です。

console.log( window.location.href );  // whatever your current location href is
window.history.replaceState( {} , 'foo', '/foo' );
console.log( window.location.href );  // oh, hey, it replaced the path with /foo

まだまだありますreplaceState()が、あなたがそれで何をしたいのか正確にはわかりません。

于 2012-10-11T04:49:35.417 に答える
9

history.pushState現在のページの状態を履歴スタックにプッシュし、アドレス バーの URL を変更します。したがって、戻ると、その状態 (渡されたオブジェクト) が返されます。

現在、それがすべてです。新しいページの表示やページ タイトルの変更など、その他のページ アクションは、ユーザーが行う必要があります。

リンクする W3C 仕様は単なるドラフトであり、ブラウザによって実装が異なる場合があります。 たとえば、Firefoxtitleはこのパラメーターを完全に無視します。

pushStateこれは、私が自分のウェブサイトで使用している簡単な例です。

(function($){
    // Use AJAX to load the page, and change the title
    function loadPage(sel, p){
        $(sel).load(p + ' #content', function(){
            document.title = $('#pageData').data('title');
        });
    }

    // When a link is clicked, use AJAX to load that page
    // but use pushState to change the URL bar
    $(document).on('click', 'a', function(e){
        e.preventDefault();
        history.pushState({page: this.href}, '', this.href);
        loadPage('#frontPage', this.href);
    });

    // This event is triggered when you visit a page in the history
    // like when yu push the "back" button
    $(window).on('popstate', function(e){
        loadPage('#frontPage', location.pathname);
        console.log(e.originalEvent.state);
    });
}(jQuery));
于 2012-10-16T15:07:48.550 に答える
6

例を見てください

window.history.replaceState({
    foo: 'bar'
}, 'Nice URL Title', '/nice_url');

window.onpopstate = function (e) {
    if (typeof e.state == "object" && e.state.foo == "bar") {
        alert("Blah blah blah");
    }
};

window.history.go(-1);

と検索location.hash;

于 2012-10-16T09:45:29.140 に答える
2

MDN History docによる
と、2 番目の引数は現在ではなく将来に使用されると明確に述べられています。2 番目の引数が Web ページのタイトルを処理することは正しいですが、現在、すべての主要なブラウザーで無視されています。

Firefox は現在、このパラメーターを無視していますが、将来使用する可能性があります。ここで空の文字列を渡すと、メソッドが将来変更されても安全です。または、移動先の州の短いタイトルを渡すこともできます。

于 2015-03-12T06:22:58.693 に答える
2

2 番目の引数Titleは、ページのタイトルを意味するものではありません - そのページの状態の定義/情報です。

ただし、 onpopstateイベントを使用してタイトルを変更し、タイトル名を 2 番目の引数からではなく、オブジェクトとして渡された最初のパラメーターの属性として渡すことができます。

参考： http ://spoiledmilk.com/blog/html5-ching-the-browser-url-without-refreshing-page/

于 2014-03-20T07:10:18.073 に答える
1

@Sevの回答に本当に返信したかったのです。

Sev のとおりです。内部にバグがあります。window.history.replaceState

これを修正するには、コンストラクターを書き直してタイトルを手動で設定します。

var replaceState_tmp = window.history.replaceState.constructor;
window.history.replaceState.constructor = function(obj, title, url){
    var title_ = document.getElementsByTagName('title')[0];
    if(title_ != undefined){
        title_.innerHTML = title;
    }else{
        var title__ = document.createElement('title');
        title__.innerHTML = title;
        var head_ = document.getElementsByTagName('head')[0];
        if(head_ != undefined){
            head_.appendChild(title__);
        }else{
            var head__ = document.createElement('head');
            document.documentElement.appendChild(head__);
            head__.appendChild(title__);
        }
    }
    replaceState_tmp(obj,title, url);
}
于 2015-09-15T18:23:54.740 に答える