Rumah hujung hadapan web tutorial js js页面跳转的方式有哪些

js页面跳转的方式有哪些

Feb 16, 2019 am 10:45 AM
Lompat halaman

JavaScript实现页面跳转的方式有:直接跳转、通过onclick函数实现按钮跳转、window.open函数打开新的窗口以及通过confirm方法来实现是否确认要打开新窗口

我们在开发的过程中总会遇到各种页面跳转的情况,不同的跳转方式带来的体验不同。今天将分享几个JavaScript中的页面跳转方式,希望对大家有所帮助。

js页面跳转的方式有哪些

【推荐课程:JavaScript教程

方法一:直接跳转样式

<script>window.location.href=&#39;//m.sbmmt.com&#39;;</script>

方法二:通过按钮点击来跳转页面

<input type="button" value="点击" onclick="location.href=&#39;//m.sbmmt.com/&#39;">

通过给按钮添加一个onclick事件。但点击事会跳转到事先设置好的链接地址

方法三:在本页面中直接打开新的窗口

<a href="javascript:" onClick="window.open(&#39;//m.sbmmt.com/&#39;,&#39;&#39;,&#39;height=200,width=300,scrollbars=yes&#39;) 
PHP中文网</a>

通过window.open()函数可以在本页面中打开一个新的窗口,scrollbars是用于设置滚动条

js页面跳转的方式有哪些

方法四:页面停留5后再跳转新的页面

<script type="text/javascript">
  function demo(){
  window.location.href ="//m.sbmmt.com";
  }
  setTimeout(demo,5000);
  </script>
<a onclick="demo()">PHP中文网</a>

setTimeout方法用于在指定的毫秒数后调用函数或计算表达式,在本例中通过设置时间参数使页面在5s之后跳转

js页面跳转的方式有哪些

方法五:通过页面弹出确认框来选择是否要跳转到新的页面中

<script type="text/javascript">
  function demo(){
  if(confirm("你确定要跳转到新的页面吗")){
    window.location.href ="//m.sbmmt.com";
  
  }
}
  </script>
<a onclick="demo()">PHP中文网</a>

效果图:

GIF.gif

confirm方法用于显示一个带有指定消息和 OK 及取消按钮的对话框,当选择确定时就会跳转到新的页面,选择取消时则不会跳转页面

本文参考文章:

https://www.html.cn/doc/javascript/timing/

https://www.html.cn/doc/javascript/window-location/

总结:以上就是本篇文章的全部内容了,希望能够通过这篇文章让大家学会利用JavaScript来实现各种页面跳转方式

Atas ialah kandungan terperinci js页面跳转的方式有哪些. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Penjelasan terperinci tentang fungsi lompat halaman PHP: kemahiran lompat halaman pengepala, lokasi, ubah hala dan fungsi lain Penjelasan terperinci tentang fungsi lompat halaman PHP: kemahiran lompat halaman pengepala, lokasi, ubah hala dan fungsi lain Nov 18, 2023 pm 05:08 PM

Penjelasan terperinci tentang fungsi lompat halaman PHP: Kemahiran lompat halaman untuk pengepala, lokasi, ubah hala dan fungsi lain, yang memerlukan contoh kod khusus Pengenalan: Apabila membangunkan tapak web atau aplikasi Web, lompat antara halaman adalah fungsi penting. PHP menyediakan pelbagai cara untuk melaksanakan lompatan halaman, termasuk fungsi pengepala, fungsi lokasi dan fungsi lompat yang disediakan oleh beberapa perpustakaan pihak ketiga, seperti ubah hala. Artikel ini akan memperkenalkan secara terperinci cara menggunakan fungsi ini

Gunakan uniapp untuk mencapai kesan animasi lompat halaman Gunakan uniapp untuk mencapai kesan animasi lompat halaman Nov 21, 2023 pm 02:15 PM

Tajuk: Menggunakan uniapp untuk mencapai kesan animasi lompat halaman Dalam beberapa tahun kebelakangan ini, reka bentuk antara muka pengguna aplikasi mudah alih telah menjadi salah satu faktor penting dalam menarik pengguna. Kesan animasi lompat halaman memainkan peranan penting dalam meningkatkan pengalaman pengguna dan kesan visualisasi. Artikel ini akan memperkenalkan cara menggunakan uniapp untuk mencapai kesan animasi lompat halaman dan memberikan contoh kod khusus. uniapp ialah rangka kerja pembangunan aplikasi merentas platform yang dibangunkan berdasarkan Vue.js Ia boleh menyusun dan menjana aplikasi untuk berbilang platform seperti program mini, H5 dan App melalui set kod.

Contoh kod PHP: Cara menggunakan POST untuk lulus parameter dan melaksanakan lompatan halaman Contoh kod PHP: Cara menggunakan POST untuk lulus parameter dan melaksanakan lompatan halaman Mar 07, 2024 pm 01:45 PM

Tajuk: Contoh kod PHP: Cara menggunakan POST untuk lulus parameter dan melaksanakan lompatan halaman Dalam pembangunan web, ia selalunya melibatkan keperluan untuk lulus parameter melalui POST dan memprosesnya di bahagian pelayan untuk melaksanakan lompatan halaman. PHP, sebagai bahasa skrip sebelah pelayan yang popular, menyediakan pelbagai fungsi dan sintaks untuk mencapai tujuan ini. Berikut akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi ini melalui contoh praktikal. Pertama, kita perlu menyediakan dua halaman, satu untuk menerima permintaan POST dan parameter proses

Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue? Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue? Jul 21, 2023 am 08:33 AM

Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue? Dengan pembangunan berterusan teknologi pembangunan bahagian hadapan, Vue.js telah menjadi salah satu rangka kerja bahagian hadapan yang paling popular. Dalam pembangunan Vue, lompat halaman adalah bahagian penting. Vue menyediakan VueRouter untuk mengurus penghalaan aplikasi, dan penukaran lancar antara halaman boleh dicapai melalui penghalaan. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk melaksanakan lonjakan halaman dalam Vue, dengan contoh kod. Mula-mula, pasang pemalam vue-router dalam projek Vue.

Ralat UniApp: Tidak dapat mencari penyelesaian untuk lompat halaman 'xxx' Ralat UniApp: Tidak dapat mencari penyelesaian untuk lompat halaman 'xxx' Nov 25, 2023 am 09:53 AM

UniApp ialah rangka kerja pembangunan merentas platform yang boleh digunakan untuk membangunkan aplikasi berbilang terminal dengan cepat seperti applet, aplikasi dan H5. Walau bagaimanapun, semasa proses pembangunan menggunakan UniApp, kami juga akan menghadapi beberapa masalah Salah satu masalah biasa ialah mesej ralat "Tidak dapat mencari lompat halaman 'xxx'". Jadi, bagaimana kita menyelesaikan masalah ini? Pertama, kita perlu mengenal pasti apa yang menyebabkan masalah. Masalah ini biasanya disebabkan oleh tetapan laluan yang salah pada halaman. Dalam UniApp, kami biasanya menggunakan penghalaan (router

Amalan terbaik untuk menggunakan Golang untuk melaksanakan lompatan halaman Amalan terbaik untuk menggunakan Golang untuk melaksanakan lompatan halaman Mar 05, 2024 pm 01:18 PM

Amalan terbaik untuk menggunakan Golang untuk melaksanakan lompatan halaman Apabila membangunkan aplikasi web, lompatan halaman adalah keperluan fungsian biasa. Di Golang, kita boleh menggunakan beberapa perpustakaan untuk melaksanakan lompatan halaman, seperti menggunakan rangka kerja Gin untuk mengendalikan penghalaan dan lompatan halaman. Artikel ini akan memperkenalkan amalan terbaik tentang cara melaksanakan lonjakan halaman di Golang dan memberikan contoh kod khusus. Pengenalan kepada rangka kerja Gin Gin ialah rangka kerja web yang ditulis dalam bahasa Go, yang berkuasa dan mudah digunakan.

Applet WeChat menyedari kesan animasi lompat halaman Applet WeChat menyedari kesan animasi lompat halaman Nov 21, 2023 pm 03:10 PM

Applet WeChat melaksanakan kesan animasi lompat halaman Dalam applet WeChat, lompat halaman adalah fungsi yang sangat biasa. Untuk meningkatkan pengalaman pengguna, kami boleh menjadikan penukaran halaman lebih lancar dan lebih jelas dengan menambahkan kesan animasi. Di bawah saya akan memperkenalkan cara menggunakan API applet WeChat untuk mencapai kesan animasi lompat halaman, dan melampirkan contoh kod tertentu. Pertama, kita perlu memahami fungsi kitaran hayat halaman dalam applet WeChat. Apabila halaman akan dipaparkan, anda boleh melaksanakan animasi lompat halaman dengan mendengar fungsi kitaran hayat onShow halaman.

Bagaimana untuk melaksanakan lompatan halaman dan navigasi dalam uniapp Bagaimana untuk melaksanakan lompatan halaman dan navigasi dalam uniapp Oct 20, 2023 pm 02:07 PM

Cara melaksanakan lompatan halaman dan navigasi dalam uniapp uniapp ialah rangka kerja bahagian hadapan yang menyokong pengekodan satu kali dan penerbitan berbilang hujung Ia berdasarkan Vue.js Pembangun boleh menggunakan uniapp untuk membangunkan aplikasi mudah alih. Dalam uniapp, melaksanakan lompatan halaman dan navigasi adalah keperluan yang sangat biasa. Artikel ini akan memperkenalkan cara melaksanakan lompatan halaman dan navigasi dalam uniapp, dan memberikan contoh kod khusus. 1. Lompat halaman Gunakan kaedah yang disediakan oleh uniapp untuk melompat halaman uniapp menyediakan satu set kaedah untuk pelaksanaan.

See all articles