Bagaimana untuk Alih Keluar Hash URL Tanpa Menyegarkan Halaman Menggunakan JavaScript?

Mengalih keluar Hash daripada URL tanpa Muat Semula Halaman Menggunakan JavaScript

Apabila anda menemui URL seperti "http://example.com#something" dengan komponen cincang (#) pada penghujungnya, mengalih keluarnya tanpa memuat semula halaman boleh terbukti mencabar. Kaedah tradisional yang melibatkan penetapan "window.location.hash" kepada rentetan kosong gagal mengalih keluar simbol cincang itu sendiri.

Penyelesaian: API Sejarah HTML5

Pelayar moden menyediakan penyelesaian melalui API Sejarah HTML5. Dengan menggunakan fungsi "history.pushState()", kami boleh mengubah suai bar lokasi untuk memaparkan URL baharu tanpa mencetuskan muat semula halaman.

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

Kaedah ini secara berkesan mengalih keluar cincang daripada URL dalam semasa dan penyemak imbas yang serasi, termasuk Chrome, Firefox, Safari, Opera dan Internet Explorer 10 dan ke atas.

Anggun Degradasi untuk Penyemak Imbas Tidak Disokong

Untuk penyemak imbas yang tidak menyokong API Sejarah, anda boleh menggunakan skrip kemerosotan yang anggun:

function removeHash() {
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Preserve current scroll position
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore scroll position
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Pendekatan ini memastikan keserasian merentas pelayar yang berbeza, menghapuskan simbol cincang tanpa menyebabkan halaman menyegarkan.

Nota:

• Untuk menggantikan entri sejarah semasa dan bukannya menambah yang baharu, gunakan "replaceState()" dan bukannya "pushState() ".
• Mengalih keluar cincangan bergantung pada sokongan penyemak imbas. Walau bagaimanapun, penyelesaian ini menyediakan pendekatan komprehensif yang merangkumi kedua-dua penyemak imbas yang disokong dan tidak disokong.

Atas ialah kandungan terperinci Bagaimana untuk Alih Keluar Hash URL Tanpa Menyegarkan Halaman Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!