cari

Rumah >hujung hadapan web >tutorial js >Terangkan pengalihan halaman dalam ES6?

Terangkan pengalihan halaman dalam ES6?

WBOY
WBOYke hadapan
2023-09-13 16:33:03742semak imbas

解释一下 ES6 中的页面重定向？

Tutorial ini akan memperkenalkan pengalihan halaman yang diperkenalkan dalam versi ES6 JavaScript. Pengalihan halaman ialah kaedah menghantar pelawat halaman web dari URL semasa ke URL lain. Kami mungkin mengubah hala pengguna ke halaman lain pada tapak web yang sama atau ke tapak web atau pelayan lain.

Dalam JavaScript, tetingkap ialah objek global yang mengandungi objek kedudukan. Kita boleh menggunakan kaedah objek lokasi yang berbeza untuk mengubah hala halaman dalam ES6, yang akan kita pelajari seterusnya.

Gunakan nilai atribut href bagi objek window.location

Objek lokasi objek global tetingkap mengandungi atribut href. Objek lokasi mengandungi semua maklumat tentang lokasi halaman yang anda sedang berada. Atribut "href" objek lokasi mengandungi URL semasa.

Untuk mengubah hala pelawat ke URL lain, kita perlu menukar URL semasa dalam penyemak imbas web, yang boleh dicapai dengan menukar nilai atribut href bagi objek lokasi.

tatabahasa

Pengguna boleh mengubah hala pelawat ke halaman lain dengan menukar nilai atribut href dengan mengikut sintaks berikut. 

window.location = "<new_URL>";
window.location.href = "<new_URL>";

Dalam sintaks di atas, jika kami menetapkan nilai URL baharu pada objek window.location, secara lalai, nilai atribut href bagi objek lokasi akan ditukar.

Contoh

Dalam contoh di bawah, kami telah mencipta butang dengan teks "Ubah hala ke halaman web lain". Apabila pengguna mengklik butang, kami akan memanggil fungsi redirect() JavaScript.

Dalam fungsi redirect(), kami menukar nilai atribut href bagi objek lokasi, yang akan membawa pelawat ke URL baharu. 

<html>
<body>
   <h2>Using window.location.href attribute for page redirection</h2>
   <p>Click below button to redirect </p>
   <button id="redirect" onclick="redirect()">
   Redirect to the another webpage
   </button>
   <script type="text/javascript">
      function redirect(){
         window.location.href="https://tutorialspoint.com/"
      }
   </script>
</body>
</html>

Gunakan location.assign() kaedah

assign() ialah kaedah yang ditakrifkan di dalam objek kedudukan. Kami boleh memuatkan dokumen baharu dalam tetingkap penyemak imbas menggunakan kaedah location.assign(), memuatkan semula dokumen baharu dalam penyemak imbas bermakna pengalihan semula.

tatabahasa

Gunakan kaedah allocate() mengikut sintaks berikut untuk mengubah hala. 

window.location.assign("<new_URL>");

Dalam sintaks di atas, kami memanggil kaedah allocate() dengan objek lokasi sebagai rujukan.

parameter

  • URL_Baru - Ini ialah URL yang kami mahu ubah hala pengguna ke.

Contoh

Dalam contoh ini, kami menggunakan kaedah allocate() bagi objek lokasi untuk memuatkan halaman web lain dalam tetingkap penyemak imbas semasa. 

<html>
<body>
   <p>Using the <i>window.location.assign()</i> method to redirect users to another webpage.</p>
   <button id="redirect" onclick="redirect()">Redirect </button>
   <script type="text/javascript">
      function redirect(){
         window.location.assign("https://www.tutorialspoint.com ");
      }
   </script>
</body>
</html>

Gunakan lokasi.ganti() kaedah

Kaedah replace() berfungsi sama seperti kaedah assign() objek lokasi. Satu-satunya perbezaan antara kaedah Replace() dan allocate() ialah kaedah replace() menggantikan URL semasa dengan URL baharu daripada timbunan sejarah. Oleh itu, ia tidak membenarkan timbunan sejarah mengandungi maklumat tentang halaman web sebelumnya, bermakna pengguna tidak boleh kembali.

Kaedah

assign() menambah entri baharu pada timbunan sejarah. Oleh itu, pengguna boleh kembali ke halaman sebelumnya menggunakan butang belakang pelayar web.

tatabahasa

Pengguna boleh menggunakan kaedah replace() mengikut sintaks berikut untuk mengubah hala halaman. 

Window.location.replace("<redirection_URL>")

parameter

  • Redirection_URL - URL ubah hala ialah URL baharu yang kami mahu ubah hala pelawat ke halaman web kami.

Contoh

Dalam contoh ini, kami menggunakan kaedah replace() bagi objek lokasi untuk mengubah hala pengguna ke halaman web baharu. Dalam output, pengguna boleh cuba untuk kembali dengan mengklik butang kembali selepas ubah hala. Kaedah Replace() tidak dibenarkan untuk kembali. 

<html>
<body>
   <p>Using the <i>window.location.replace()</i> method to redirect users to another webpage.</p>
   <button id="redirect" onclick="redirect()">Redirect </button>
   <script type="text/javascript">
      function redirect(){
         window.location.replace("https://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

Selain itu, pengguna juga boleh menggunakan kaedah navigate() objek tetingkap untuk ubah hala. Kaedah navigate() ditamatkan dan oleh itu tidak disyorkan untuk ubah hala.

Kami mempelajari 3 hingga 4 cara untuk mengubah hala pengguna ke halaman web yang berbeza. Pengguna boleh menggunakan apa-apa kaedah mengikut keperluan mereka. Sebagai contoh, jika mereka ingin menggantikan URL semasa, gunakan kaedah Replace() jika tidak, gunakan kaedah allocate(). Pengguna boleh menggunakan kaedah muat semula() untuk mendapatkan data pelayan baharu.

Atas ialah kandungan terperinci Terangkan pengalihan halaman dalam ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript es6 栈 堆 对象 location href
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk mendapatkan warna semasa watak pada kursor dalam IText menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mendapatkan warna semasa watak pada kursor dalam IText menggunakan FabricJS?

Artikel berkaitan

Lihat lagi