API Navigasi pelayar moden
Gunakan API Navigasi untuk memintas dan menyesuaikan navigasi
API Navigasi pelayar moden ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Pengganti Moden
API Navigasi ialah pengganti yang lebih baharu dan lebih berkuasa untuk API Sejarah. Ia menganggap navigasi sebagai objek kelas pertama yang boleh anda pintas, batalkan dan tunggu — lebih hampir kepada cara SPA mengendalikan penghalaan pada tahun 2024.
Objek window.navigation
window.navigation mendedahkan senarai entri, entri semasa dan peristiwa navigate. navigation.entries() mengembalikan setiap entri dalam sejarah semasa; navigation.currentEntry ialah entri yang aktif. Bandingkan hal ini dengan panjang yang legap serta keadaan yang tidak boleh dibaca dalam API Sejarah.
Peristiwa navigate
Dengar navigation.addEventListener("navigate", handler) untuk memintas setiap navigasi dalam dokumen yang sama — klik pautan, penghantaran borang, kembali atau maju dan navigasi terprogram. Satu titik sambungan menggantikan gabungan pemintasan klik, popstate dan pendengar penghantaran borang.
navigation.addEventListener("navigate", (e) => {
if (!e.canIntercept) return;
e.intercept({
handler: async () => {
await renderPage(new URL(e.destination.url).pathname);
}
});
});intercept dan Pengendali
Memanggil e.intercept({ handler }) mengambil alih navigasi. Pengendali mengembalikan janji; sementara ia masih belum selesai, navigasi itu “sedang berjalan” dan URL sudah dikemas kini. Hal ini menyatukan masalah perlumbaan lama antara perubahan URL dan paparan paparan.
Semakan canIntercept
Tidak semua navigasi boleh dipintas, termasuk navigasi merentas asal dan muat turun. Periksa e.canIntercept sebelum memanggil intercept. Pengawal satu baris ini membezakan navigasi SPA daripada pemergian sebenar merentas asal.
Kaedah navigation.navigate
navigation.navigate(url, options) mencetuskan navigasi secara terprogram, setara dengan klik. Objek yang dikembalikan mempunyai janji committed dan finished, jadi anda boleh menunggu perubahan URL atau penyelesaian penuh pengendali.
Keadaan Entri dan Kunci
Setiap entri navigasi mempunyai key yang stabil merentas pemuatan semula dan id yang berbeza bagi setiap sesi. Gunakan key untuk keadaan berterusan, seperti kedudukan tatalan yang disimpan atau draf borang, dan id untuk keadaan sementara. Satu-satunya keadaan API Sejarah ialah gumpalan legap.
Kembali dan Maju
navigation.back() dan navigation.forward() ialah pembungkus mudah untuk traverseTo. Kedua-duanya mengembalikan pasangan janji { committed, finished } yang sama, jadi anda boleh menunggu navigasi kembali sebelum melakukan kerja susulan.
Membatalkan Navigasi
Jika pengguna mengklik pautan kedua ketika pautan pertama masih dipaparkan, navigasi yang sedang berlangsung boleh dibatalkan. Pengendali menerima AbortSignal melalui e.signal; hantarkannya kepada panggilan fetch supaya kerja yang sudah tidak relevan dibatalkan apabila navigasi baharu bermula.
e.intercept({
handler: async () => {
const data = await fetch(url, { signal: e.signal });
renderPage(await data.json());
}
});Mengapa Tidak Menggunakan Sejarah Sahaja?
API Sejarah berfungsi tetapi sukar digunakan: perubahan keadaan dan pemaparan paparan tidak digandingkan, pengendalian klik perlu dilakukan secara manual, penyelarasan berbilang pendengar rapuh, dan pemulihan skrol tidak lengkap. API Navigasi direka untuk keperluan SPA sejak awal dan menangani setiap masalah ini.
Sokongan Pelayar
Chrome dan Edge menyokong API Navigasi. Safari dan Firefox ketinggalan (setakat awal 2026); edarkan kod yang mengesan ciri ("navigation" in window) dan gunakan sandaran API Sejarah + peristiwa perubahan sejarah apabila ciri itu tidak tersedia. Rangka kerja seperti SvelteKit dan TanStack Router sudah membungkus pengesanan ini.
Bila Hendak Menggunakannya
Untuk projek baharu yang menyasarkan pengguna Chromium terlebih dahulu, gunakan API ini sekarang dan terima sandaran API Sejarah. Untuk tapak awam dengan khalayak luas, tunggu sokongan Safari/Firefox (atau gunakan pustaka penghalaan yang mengabstrakkan kedua-duanya). API yang lebih ringkas ini berbaloi ditunggu.
Semakan Pengetahuan
Apakah kelebihan utama peristiwa navigasi API Navigasi berbanding gabungan peristiwa perubahan sejarah dan pemintasan klik secara manual dalam API Sejarah?
Ringkasan
API Navigasi menyatukan navigasi SPA di bawah satu peristiwa navigasi dengan semantik intercept dan pembatalan, kunci yang stabil bagi setiap entry, serta penantian pengendali secara tak segerak. Ia menggantikan tampalan berselerak API Sejarah + perubahan sejarah + pemintasan klik. Kini disokong dalam pelayar Chromium; kesan ciri dan gunakan sandaran API Sejarah untuk kod merentas pelayar sehingga Safari dan Firefox menyusul.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “API Navigasi pelayar moden” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “API Navigasi pelayar moden”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “API Navigasi pelayar moden”?
Gunakan API Navigasi untuk memintas dan menyesuaikan navigasi Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “API Navigasi pelayar moden” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- pushState dan replaceState
- Peristiwa popstate
- Penghalaan Berasaskan Hash berbanding Berasaskan Laluan
- API Navigasi pelayar moden