API Sejarah JavaScript-tutorial js-php.cn

API Sejarah JavaScript

Patricia Arquette

Lepaskan： 2024-12-25 18:06:13

asal

957 orang telah melayarinya

pengenalan

JavaScript History API ialah sebahagian daripada Web API yang membolehkan kami berinteraksi dengan sejarah sesi penyemak imbas. Ia menyediakan kaedah dan sifat untuk menavigasi, memanipulasi dan mengawal timbunan sejarah, membolehkan pembangun mencipta pengalaman pengguna yang lebih dinamik dan interaktif tanpa memerlukan muat semula halaman penuh.

Ciri utama API Sejarah JavaScript

sejarah.kembali()
sejarah.hadapan()
history.go(n)
history.pushState()
history.replaceState()

Kaedah history.back().

Kaedah ini mengalihkan penyemak imbas ke halaman sebelumnya dalam sejarah sesi, bersamaan dengan butang belakang penyemak imbas. Ini hanya akan berfungsi jika halaman sebelumnya wujud dalam timbunan sejarah penyemak imbas.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>

<button onclick="history.back()">Go Back</button>

</body>
</html>

Salin selepas log masuk

Output:

The JavaScript History API

Mengklik pada butang "Kembali" akan membawa pengguna ke halaman sebelumnya jika ia wujud dalam timbunan sejarah.

Kaedah history.forward().

Kaedah ini mengalihkan penyemak imbas ke halaman seterusnya dalam sejarah sesi, bersamaan dengan butang ke hadapan penyemak imbas. Ini hanya akan berfungsi jika halaman seterusnya wujud dalam timbunan sejarah penyemak imbas.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.forward Method</h2>

<button onclick="history.forward()">Go Forward</button>

</body>
</html>

Salin selepas log masuk

Output:

The JavaScript History API

Mengklik pada butang "Maju ke Hadapan" akan membawa pengguna ke halaman seterusnya jika ia wujud dalam timbunan sejarah.

Kaedah history.go().

Kaedah ini digunakan untuk menavigasi ke titik tertentu dalam timbunan penyemak imbas. Ia memerlukan argumen 'n', yang menentukan nombor halaman yang ingin kita navigasi melalui timbunan sejarah.

Hujah 'n' boleh menerima nilai berikut:

Positif 'n' membawa pengguna ke hadapan dalam timbunan.
Negatif 'n' membawa pengguna ke belakang dalam tindanan.
Jika 'n' mempunyai nilai 0, ia memuatkan semula halaman semasa.

Kaedah history.pushState().

Kaedah ini digunakan untuk menambah entri baharu dalam timbunan sejarah sesi semasa iaitu koleksi semua halaman yang dilawati dalam tab penyemak imbas semasa.

Contoh:
Kami akan mencipta elemen butang dan memberikannya pengendali klik. Di dalam pengendali, kami memanggil kaedah pushState(). Ini menambah entri baharu dengan URL yang berbeza daripada satu halaman semasa.

// HTML ->
<button>Call pushState()</button>

// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
    history.pushState(null, ' ', 'some-page');
}

Salin selepas log masuk

Output:

The JavaScript History API

Pada masa ini, URLnya ialah - https://www.codeguage.com/courses/js/examples/pushstate

Apabila anda akan mengklik pada butang, URL akan bertukar kepada - https://www.codeguage.com/courses/js/examples/some-page

The JavaScript History API

Ini mengesahkan bahawa entri baharu telah ditambahkan pada sejarah sesi semasa, juga menukar URL dalam bar alamat penyemak imbas. Anda juga boleh melihat bahawa anak panah belakang penyemak imbas juga aktif sekarang di penjuru kiri sebelah atas, mengklik pada yang akan membawa anda kembali ke -
https://www.codeguage.com/courses/js/examples/pushstate

Satu perkara yang sangat penting untuk diketahui ialah pushState() menukar URL tanpa menyemak sama ada ia benar-benar wujud atau tidak. Ini kerana tujuan pushState() bukan untuk memuatkan halaman web, sebaliknya untuk hanya menambahkan entri baharu pada sejarah.

Kaedah history.replaceState().

Kaedah ini menggantikan entri semasa dalam timbunan sejarah sesi semasa dengan entri baharu.

Contoh:
Seperti sebelum ini, kami mempunyai set butang dengan pengendali klik. Tetapi kali ini, di dalam pengendali, kami memanggil replaceState() untuk menggantikan entri sejarah semasa dengan yang baharu.

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>

<button onclick="history.back()">Go Back</button>

</body>
</html>

Salin selepas log masuk

Output:

The JavaScript History API

URL semasa ialah -
https://www.codeguage.com/courses/js/examples/replacestate

Apabila anda mengklik butang, URL akan bertukar kepada -
https://www.codeguage.com/courses/js/examples/some-page

The JavaScript History API

URL penyemak imbas telah diganti dan anda dapat melihat bahawa kunci anak panah belakang di penjuru kiri sebelah atas TIDAK aktif, mengesahkan bahawa entri baharu telah TIDAK ditambahkan pada timbunan sejarah, kami baru saja menggantikan entri semasa dengan yang baharu satu.

Dan itu sahaja! Anda telah berjaya mempelajari tentang API Sejarah JavaScript dan cara menggunakan serta menggabungkan utilitinya yang berbeza dalam aplikasi anda.

Hubungi saya di LinkedIn :- Linkedin

Sila lihat GitHub saya untuk projek yang menakjubkan:- Github

Lihat Portfolio Peribadi saya :- Portfolio Aryan

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