contoh history.replaceState ()?

Adakah yang bisa memberikan contoh yang baik untuk history.replaceState? Inilah yang dikatakan w3.org :

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

Memperbarui entri saat ini dalam riwayat sesi untuk memiliki data, judul, dan, jika disediakan dan bukan null, URL.

Memperbarui:

Ini bekerja dengan sempurna:

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

Url berubah, tetapi judul tidak berubah. Apakah itu bug atau saya melewatkan sesuatu? Diuji pada Chrome terbaru.

Memang ini bug, meski disengaja selama 2 tahun sekarang. Masalahnya terletak pada beberapa spesifikasi yang tidak jelas dan kompleksitas ketika document.titledan mundur / maju terlibat.

Lihat referensi bug di Webkit dan Mozilla . Juga Opera pada pengantar History API mengatakan itu tidak menggunakan parameter judul dan mungkin masih tidak.

Saat ini argumen ke-2 pushState dan replaceState - judul entri riwayat - tidak digunakan dalam implementasi Opera, tetapi mungkin satu hari.

Solusi potensial

Satu-satunya cara yang saya lihat adalah mengubah elemen judul dan menggunakan pushState sebagai gantinya:

document.getElementsByTagName('title')[0].innerHTML = 'bar';
window.history.pushState( {} , 'bar', '/bar' );

Ini adalah contoh minimal yang dibuat-buat.

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

Ada lagi yang harus replaceState()saya lakukan tetapi saya tidak tahu apa sebenarnya yang ingin Anda lakukan dengannya.

history.pushStatemendorong status halaman saat ini ke tumpukan riwayat, dan mengubah URL di bilah alamat. Jadi, ketika Anda kembali, keadaan itu (objek yang Anda lewati) dikembalikan kepada Anda.

Saat ini, hanya itu yang dilakukannya. Tindakan halaman lainnya, seperti menampilkan halaman baru atau mengubah judul halaman, harus dilakukan oleh Anda.

W3C spec yang Anda tautkan hanyalah konsep, dan browser dapat menerapkannya secara berbeda. Firefox , misalnya, mengabaikan titleparameter sepenuhnya.

Berikut adalah contoh sederhana pushStateyang saya gunakan di situs web saya.

(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));

lihat contohnya

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

dan pencarian location.hash;

Argumen kedua Judul tidak berarti Judul halaman - Ini lebih merupakan definisi / informasi untuk keadaan halaman itu

Tapi kita masih bisa mengubah judul menggunakan event onpopstate , dan meneruskan nama judul bukan dari argumen kedua, tetapi sebagai atribut dari parameter pertama yang dilewatkan sebagai objek

Referensi: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

Menurut dokumen MDN History
Ada jelas mengatakan bahwa argumen kedua untuk masa depan digunakan bukan untuk saat ini. Anda benar bahwa argumen kedua berhubungan dengan judul halaman web tetapi saat ini diabaikan oleh semua browser utama.

Firefox saat ini mengabaikan parameter ini, meskipun mungkin menggunakannya di masa depan. Melewati string kosong di sini harus aman terhadap perubahan metode di masa mendatang. Atau, Anda bisa memberikan judul pendek untuk status yang Anda pindahkan.

Saya benar-benar ingin menanggapi jawaban @ Sev.

Sev benar, ada bug di dalamnya window.history.replaceState

Untuk memperbaiki ini cukup menulis ulang konstruktor untuk mengatur judul secara manual.

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);
}

Misalkan https://www.mozilla.org/foo.html menjalankan JavaScript berikut:

const stateObj = { foo: 'bar' };

history.pushState(stateObj, '', 'bar.html');

Ini akan menyebabkan bilah URL untuk menampilkan https://www.mozilla.org/bar2.html , tetapi tidak akan menyebabkan peramban memuat bar2.html atau bahkan memeriksa apakah bar2.html ada.