Gambaran Keseluruhan API Sejarah JavaScript

Tutorial ini meneroka API Sejarah JavaScript, alat yang berkuasa untuk memanipulasi sejarah pelayaran pengguna dalam aplikasi web moden. Ciri -ciri utama termasuk menambah, mengeluarkan, dan menggantikan entri sejarah, meningkatkan pengalaman pengguna dan memberikan lebih banyak kawalan ke atas navigasi.

Konsep Utama:

objek
• (harta objek history) adalah teras API, menyediakan kaedah untuk berinteraksi dengan timbunan sejarah penyemak imbas. window
kaedah seperti
• , back(), dan forward() membenarkan navigasi melalui sejarah, meniru butang belakang dan ke hadapan penyemak imbas. go() bergerak go(n) penyertaan ke hadapan atau ke belakang (negatif n kembali). n
• Menambah penyertaan baru ke sejarah, mengemas kini URL tanpa tambah nilai halaman penuh. pushState() mengubah entri sejarah semasa. replaceState()
Setiap entri sejarah boleh dikaitkan dengan objek negara, boleh diakses melalui acara
• . popstate

Navigating History:

kaedah

, back(), dan forward() menyediakan navigasi mudah: go()

• // setaraf dengan mengklik butang "Kembali". history.back();
• // setaraf dengan mengklik butang "Forward". history.forward();
• // bergerak n langkah ke hadapan (positif n) atau mundur (negatif n). history.go(n);

bilangan penyertaan dalam timbunan sejarah boleh diakses melalui

. history.length

memanipulasi penyertaan sejarah:

dan pushState() sangat penting untuk kemas kini URL dinamik: replaceState()

• Menambah entri sejarah baru. history.pushState(stateObj, title, URL); adalah objek JavaScript yang berkaitan dengan entri; stateObj (sering diabaikan) adalah rentetan; title adalah URL baru yang dipaparkan di bar alamat. URL
• Menggantikan entri sejarah semasa. history.replaceState(stateObj, title, URL);

kebakaran acara

apabila pengguna menavigasi ke belakang atau ke hadapan, atau apabila popstate, back(), atau forward() dipanggil. Harta Acara go() mengandungi state dari entri sejarah yang sepadan. stateObj

Aplikasi Praktikal: Contoh galeri foto

Bayangkan galeri foto di mana mengklik thumbnail mengubah imej yang dipaparkan dan mengemas kini URL tanpa muat semula halaman. API Sejarah menjadikan ini mungkin. Setiap imej akan mempunyai URL yang unik, yang membolehkan penanda buku dan akses langsung. Kaedah pushState() akan mengemas kini URL apabila imej dipilih, dan acara popstate akan mengendalikan navigasi antara imej.

Eksplorasi lanjut:

Rangkaian Pemaju Mozilla (MDN) menyediakan dokumentasi komprehensif mengenai API Sejarah, yang meliputi teknik canggih dan butiran keserasian penyemak imbas. Memahami acara popstate adalah kunci untuk membina aplikasi interaktif yang memanfaatkan API sejarah dengan berkesan. Di samping itu, meneroka bagaimana API ini mengintegrasikan dengan kerangka JavaScript seperti React dan perpustakaan penghalaannya.

Atas ialah kandungan terperinci Gambaran Keseluruhan API Sejarah JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!