我們在開發的過程中總會遇到各種頁面跳轉的情況,不同的跳轉方式帶來的體驗不同。今天將分享幾個JavaScript中的頁面跳轉方式,希望對大家有所幫助。
【推薦課程:JavaScript教程】
方法一:直接跳轉樣式
<script>window.location.href='http://www.gxlcms.com';</script>
方法二:通過按鈕點擊來跳轉頁面
<input type="button" value="點擊" onclick="location.href='http://www.gxlcms.com/'">
通過給按鈕添加一個onclick事件。但點擊事會跳轉到事先設置好的鏈接地址
方法三:在本頁面中直接打開新的窗口
<a href="javascript:" onClick="window.open('http://www.gxlcms.com/','','height=200,width=300,scrollbars=yes') PHP中文網</a>
通過window.open()函數可以在本頁面中打開一個新的窗口,scrollbars是用于設置滾動條
方法四:頁面停留5后再跳轉新的頁面
<script type="text/javascript"> function demo(){ window.location.href ="http://www.gxlcms.com"; } setTimeout(demo,5000); </script> <a onclick="demo()">PHP中文網</a>
setTimeout方法用于在指定的毫秒數后調用函數或計算表達式,在本例中通過設置時間參數使頁面在5s之后跳轉
方法五:通過頁面彈出確認框來選擇是否要跳轉到新的頁面中
<script type="text/javascript"> function demo(){ if(confirm("你確定要跳轉到新的頁面嗎")){ window.location.href ="http://www.gxlcms.com"; } } </script> <a onclick="demo()">PHP中文網</a>
效果圖:
confirm方法用于顯示一個帶有指定消息和 OK 及取消按鈕的對話框,當選擇確定時就會跳轉到新的頁面,選擇取消時則不會跳轉頁面
本文參考文章:
https://www.html.cn/doc/javascript/timing/
https://www.html.cn/doc/javascript/window-location/
總結:
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com