Bagaimanakah Saya Boleh Mengalih Keluar Fragmen Cincang URL Tanpa Menyegarkan Halaman?

Mengalih keluar Fragmen Cincang URL Tanpa Muat Semula

Dalam landskap pembangunan web moden hari ini, mengalih keluar serpihan cincang (#something) daripada URL ( cth., http://example.com#something) ialah keperluan biasa. Walaupun pendekatan mudah seperti menetapkan "window.location.hash = ''" mungkin kelihatan intuitif, ia tidak menyelesaikan isu sepenuhnya.

Untuk mengalih keluar cincang dengan berkesan tanpa memuat semula halaman, kami beralih kepada HTML5 API Sejarah. API ini menyediakan keupayaan untuk memanipulasi URL dalam bar lokasi dalam domain semasa.

Fungsi JavaScript berikut memanfaatkan API Sejarah HTML5 untuk mengalih keluar serpihan cincang:

function removeHash() {
    history.pushState("", document.title, window.location.pathname + window.location.search);
}

Kod ini coretan menggantikan URL semasa dengan yang baharu tanpa serpihan cincang, menolak keadaan baharu ke dalam sejarah penyemak imbas. Ia berfungsi dengan lancar dalam penyemak imbas moden seperti Chrome, Firefox, Safari, Opera dan juga IE 10.

Untuk penyemak imbas yang tidak menyokong API Sejarah, pendekatan degradasi yang anggun boleh digunakan:

function removeHash() {
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Fungsi lanjutan ini memastikan penyingkiran cincang dalam penyemak imbas yang tidak mempunyai sokongan API Sejarah, mengekalkan kedudukan tatal halaman untuk meminimumkan visual gangguan.

Dengan menggunakan teknik ini, anda boleh mengalih keluar serpihan cincang daripada URL dengan cekap tanpa mencetuskan penyegaran halaman, memberikan pengalaman pengguna yang lancar merentas pelbagai penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengalih Keluar Fragmen Cincang URL Tanpa Menyegarkan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!