cara menyegarkan div menggunakan javascript tanpa menyegarkan halaman menggunakan ('#selectPlayer'). klik(fungsi() { lokasi. memuat ulang();
bagaimana cara menyegarkan div menggunakan javascript tanpa menyegarkan halaman?
Isi
Segarkan div HTML tanpa memuat halaman AJAX, bagaimana cara menyegarkan halaman tanpa kehilangan javascript data formulir?. Saya akan menunjukkan cara menyegarkan konten elemen div tanpa memuat ulang seluruh halaman menggunakan jQuery
Definisi dan Penggunaan
Metode reload()_ memuat ulang dokumen saat ini
Metode reload()_ melakukan hal yang sama seperti tombol muat ulang di browser Anda
Sintaksis
Parameter
Nilai Pengembalian
Dukungan Peramban
location.reload() didukung di semua browser
ChromeEdgeFirefoxSafariOperaIEYaYaYaYaYaSaat menggunakan JavaScript, Anda mungkin ingin me-refresh halaman web dengan kode Anda. Mari kita lihat berbagai cara untuk melakukannya
Di sini kita akan mempelajari metode berikut untuk menyegarkan halaman web dalam JavaScript
1. Menyegarkan Halaman di JavaScript
Dalam JavaScript, halaman dimuat ulang menggunakan dokumen. lokasi. reload() metode atau jendela. lokasi. muat ulang() metode. Lokasinya. metode reload() memberikan hasil yang sama dengan menekan tombol reload pada browser Anda
Metode ini memuat ulang halaman langsung dari cache browser secara default. Jika properti forceGet disetel ke benar, halaman web akan dimuat ulang dari server.
Muat Ulang Halaman dari Cache
Contoh
Page Reload Uisng JavascriptMuat Ulang Halaman dari Server (tanpa Cache)
Page Reload Uisng Javascript without Cache _Parameter default adalah False di sini. Jadi, jika parameter dibiarkan kosong, object. reload() memuat ulang halaman menggunakan data cache browser, mis. e. identik dengan menggunakan metode sebagai objek. muat ulang (salah)
2. Refresh Otomatis Halaman Setelah 5 Detik
Page Reload Uisng Javascript after 5 secondsAnda juga dapat menggunakan JavaScript untuk me-refresh halaman web secara otomatis setelah selang waktu tertentu. Dengan menggunakan metode setTimeout() di sini, kami menyegarkan halaman secara otomatis 5 detik setelah dimuat ulang
3. Segarkan Halaman saat Klik Tombol
Page Reload Uisng Javascript on button clickAlih-alih menyegarkan halaman web secara otomatis menggunakan metode, Anda dapat memanggil metode saat pengguna melakukan suatu peristiwa, seperti klik tombol. Dalam contoh ini, Anda dapat melihat bahwa halaman akan disegarkan menggunakan lokasi. metode reload() setelah pengguna mengklik tombol Muat Ulang Halaman
4. Menggunakan Fungsi Sejarah
Contoh
Page Reload Uisng Javascriptusing history function _JavaScript, objek jendela memiliki properti riwayat yang digunakan untuk menyegarkan halaman. Sejarah. metode go() dalam contoh ini membantu dalam memanipulasi riwayat sesi browser
Di sini 0 adalah parameter riwayat,
- 0 = Halaman saat ini
- -1 = Halaman sebelumnya
Parameter ini memungkinkan Anda menavigasi bolak-balik dalam riwayat sesi halaman web Anda
5. Segarkan Halaman dalam HTML
Page Reload Uisng meta tagKode akan me-refresh dokumen HTML setiap 1 detik. http-equiv diatur untuk menyegarkan dan atribut konten diatur ke interval 1 detik.
6. Menggunakan Jquery
Page Reload Uisng Jquery _Jendela. lokasi memiliki properti href. Ini mengembalikan URL situs web saat ini. Dalam contoh ini, properti ini digunakan untuk memuat ulang dan menyegarkan halaman saat ini. Properti ini juga dapat digunakan untuk menargetkan halaman lain dan menyegarkannya
Saat Anda mengembangkan aplikasi seperti blog atau halaman yang datanya dapat berubah berdasarkan tindakan pengguna, Anda pasti ingin halaman tersebut sering disegarkan
Saat halaman disegarkan atau dimuat ulang, data baru apa pun akan ditampilkan berdasarkan interaksi pengguna tersebut. Kabar baik – Anda dapat menerapkan jenis fungsi ini dalam JavaScript dengan satu baris kode
Pada artikel ini, kita akan mempelajari cara memuat ulang halaman web dalam JavaScript, serta melihat beberapa situasi lain di mana kita mungkin ingin mengimplementasikan pemuatan ulang ini dan cara melakukannya
Inilah Scrim Interaktif tentang Cara Menyegarkan Halaman di JavaScript
Cara Menyegarkan Halaman di JavaScript Dengan location.reload()
Anda dapat menggunakan metode JavaScript location.reload()_ untuk memuat ulang URL saat ini. Metode ini berfungsi mirip dengan tombol Refresh browser
Metode reload()_ adalah metode utama yang bertanggung jawab untuk memuat ulang halaman. Di sisi lain, location adalah antarmuka yang mewakili lokasi sebenarnya (URL) dari objek yang ditautkan – dalam hal ini URL halaman yang ingin kita muat ulang. Itu dapat diakses melalui document.location atau <button type="button" onClick="window.location.reload()"> Reload Page </button> 0
Berikut ini adalah sintaks untuk memuat ulang halaman
Catatan. Ketika Anda membaca beberapa sumber tentang "memuat ulang halaman dalam JavaScript", Anda akan menemukan berbagai penjelasan yang menyatakan bahwa metode relaod menggunakan nilai boolean sebagai parameter dan bahwa <button type="button" onClick="window.location.reload()"> Reload Page </button> 1 membantu memuat ulang secara paksa untuk mem-bypass cache-nya. Tapi ini bukan masalahnya
Menurut Dokumentasi MDN, parameter boolean bukan bagian dari spesifikasi saat ini untuk location.reload() — dan sebenarnya tidak pernah menjadi bagian dari spesifikasi apa pun untuk location.reload() yang pernah dipublikasikan
Browser seperti Firefox, di sisi lain, mendukung penggunaan parameter boolean non-standar yang dikenal sebagai <button type="button" onClick="window.location.reload()"> Reload Page </button> 4 untuk location.reload(), yang menginstruksikan Firefox untuk mem-bypass cache-nya dan memuat ulang dokumen saat ini secara paksa
Selain dari Firefox, parameter apa pun yang Anda tentukan dalam panggilan location.reload() di browser lain akan diabaikan dan tidak berpengaruh
Cara Melakukan Muat Ulang/Segarkan Halaman di JavaScript Saat Tombol Diklik
Sejauh ini kita telah melihat cara kerja reload di JavaScript. Sekarang mari kita lihat bagaimana Anda dapat menerapkan ini ketika suatu peristiwa terjadi atau ketika tindakan seperti klik tombol terjadi
<button type="button" onClick="window.location.reload()"> Reload Page </button>Catatan. Cara kerjanya mirip dengan saat kita menggunakan <button type="button" onClick="window.location.reload()"> Reload Page </button> 7
Cara Menyegarkan/Memuat Ulang Halaman Secara Otomatis di JavaScript
Kami juga dapat mengizinkan penyegaran halaman setelah waktu yang ditentukan menggunakan metode <button type="button" onClick="window.location.reload()"> Reload Page </button> 8 seperti yang terlihat di bawah ini
setTimeout(() => { document.location.reload(); }, 3000);Menggunakan kode di atas halaman web kami akan dimuat ulang setiap 3 detik
Sejauh ini, kita telah melihat cara menggunakan metode muat ulang di file HTML kita saat kita melampirkannya ke acara tertentu, serta di file JavaScript kita
Cara Menyegarkan/Memuat Ulang Halaman Menggunakan Fungsi Riwayat di JavaScript
Fungsi History adalah metode lain untuk me-refresh halaman. Fungsi histori digunakan seperti biasa untuk menavigasi mundur atau maju dengan meneruskan nilai positif atau negatif
Misalnya, jika kita ingin kembali ke masa lalu, kita akan menggunakan
history.go(-1);Ini akan memuat halaman dan membawa kita ke halaman sebelumnya yang kita navigasikan. Tetapi jika kita hanya ingin me-refresh halaman saat ini, kita dapat melakukannya dengan tidak memberikan parameter apa pun atau dengan mengirimkan <button type="button" onClick="window.location.reload()"> Reload Page </button> 9 (nilai netral)
history.go(); history.go(0);Catatan. Ini juga bekerja dengan cara yang sama seperti kita menambahkan metode reload() ke metode <button type="button" onClick="window.location.reload()"> Reload Page </button> 8 dan event click di HTML
Membungkus
Pada artikel ini, kami belajar cara me-refresh halaman menggunakan JavaScript. Kami juga mengklarifikasi kesalahpahaman umum yang menyebabkan orang meneruskan parameter boolean ke metode reload()
Terima kasih sudah membaca
IKLAN
IKLAN
IKLAN
Pengembang Frontend & Penulis Teknis
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai