JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式總結(jié)
前言：
JavaScript是一種基于ECMAScript標(biāo)準(zhǔn)開(kāi)發(fā)的腳本語(yǔ)言，它主要用于網(wǎng)頁(yè)和網(wǎng)頁(yè)應(yīng)用程序的開(kāi)發(fā)。相信很多人在開(kāi)發(fā)Web程序的時(shí)候，對(duì)于頁(yè)面之間的跳轉(zhuǎn)，有很多種方式。本章內(nèi)容就是簡(jiǎn)述了我們?cè)陂_(kāi)發(fā)過(guò)程中所能用到的一些跳轉(zhuǎn)方式。
一、為什么要使用頁(yè)面跳轉(zhuǎn)
- 導(dǎo)航：用戶點(diǎn)擊鏈接或按鈕，跳轉(zhuǎn)到不同的頁(yè)面，實(shí)現(xiàn)頁(yè)面間的切換和導(dǎo)航。
- 表單處理：在表單提交后，可以將數(shù)據(jù)發(fā)送到服務(wù)器進(jìn)行處理，然后跳轉(zhuǎn)到相應(yīng)的結(jié)果頁(yè)面，以展示處理結(jié)果。
- 身份驗(yàn)證：用戶登錄或注冊(cè)成功后，可以跳轉(zhuǎn)到受保護(hù)的頁(yè)面，以確保用戶已經(jīng)通過(guò)身份驗(yàn)證。
- 動(dòng)態(tài)加載內(nèi)容：通過(guò)頁(yè)面跳轉(zhuǎn)，可以根據(jù)用戶的操作或輸入，動(dòng)態(tài)加載不同的內(nèi)容，實(shí)現(xiàn)更好的用戶體驗(yàn)。
- 單頁(yè)應(yīng)用：在單頁(yè)應(yīng)用中，通過(guò)頁(yè)面跳轉(zhuǎn)可以實(shí)現(xiàn)不同路由之間的切換，實(shí)現(xiàn)頁(yè)面和數(shù)據(jù)的動(dòng)態(tài)加載。
二、常見(jiàn)的跳轉(zhuǎn)方式演示：
1. location.href
使用 location.href 屬性可以設(shè)置或獲取當(dāng)前頁(yè)面的 URL。通過(guò)將其值設(shè)置為新的 URL，可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。
<script> //給URL賦值會(huì)跳轉(zhuǎn)指定網(wǎng)址 window.location.href="./index.html"; //不賦值 則返回當(dāng)前頁(yè)面的URL let a=location.href; alert(a); </script>
2.history.go（）
使用history.go()方法可以跳轉(zhuǎn)到指定的歷史記錄索引。負(fù)數(shù)表示后退，正數(shù)表示前進(jìn)。
<script> // 后退一步 history.go(-1); // 前進(jìn)一步 history.go(1); </script>
3.history.back()
history.back()方法可以讓瀏覽器后退到歷史記錄中的上一個(gè)頁(yè)面。與history.go() 功能一樣
<script> history.back(); </script>
4.location.assign（）
使用 location.assign() 方法同樣可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。它接受一個(gè) URL 參數(shù)作為要跳轉(zhuǎn)的目標(biāo)地址。
<script>
// 跳轉(zhuǎn)到指定的 URL 地址
window.location.assign('./index.html');
</script>
5. self.location
在JavaScript中，self.location是一個(gè)非常重要的屬性，它主要用于獲取或設(shè)置當(dāng)前窗口對(duì)象的位置信息。由于self是對(duì)當(dāng)前窗口對(duì)象的引用，因此在多窗口被打開(kāi)的情況下，我們可以保證正確調(diào)用當(dāng)前窗口內(nèi)的函數(shù)或?qū)傩浴?/p>
<script> //在當(dāng)前窗口打開(kāi)指定網(wǎng)頁(yè) self.location='https://www.taobao.com/'; </script>
6.top.location
top.location表示頂層窗口的位置信息，它主要用于在頂層窗口中打開(kāi)新的頁(yè)面。
<script> //在頂層窗口中打開(kāi)指定頁(yè)面 top.location='https://www.taobao.com/'; </script>
7.location.replace
location.replace() 方法可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，但與前兩種方式不同的是，它會(huì)替換當(dāng)前頁(yè)面的歷史記錄，導(dǎo)致用戶無(wú)法返回到前一個(gè)頁(yè)面
<script>
// 跳轉(zhuǎn)到指定的 URL 地址，并替換當(dāng)前頁(yè)面的歷史記錄
location.replace('https://www.taobao.com/');
</script>
8. window.open()
它可以在一個(gè)新窗口或選項(xiàng)卡中打開(kāi)一個(gè)指定的 URL。
<script>
//在原有的窗口上打開(kāi)一個(gè)指定的URL
window.open('https://www.taobao.com/','淘寶網(wǎng)','width=300px,height=200px,top=100px,left=100px')
// 在新窗口中打開(kāi)指定的 URL 地址
window.open('https://www.taobao.com/'）；
</script>
效果圖演示：
三、頁(yè)面跳轉(zhuǎn)方式聯(lián)合HTML按鈕演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js頁(yè)面跳轉(zhuǎn)的幾種方式？</title>
<script>
//跳轉(zhuǎn)到index.html頁(yè)面
function fun1(){
location.href="./index.html";
}
//后退一頁(yè)
function fun2(){
window.history.go(1);
}
//跳轉(zhuǎn)到index.html頁(yè)面
function fun3(){
window.location.assign('./index.html');
}
//跳轉(zhuǎn)到淘寶網(wǎng)
function fun4(){
self.location='https://www.taobao.com/';
}
//跳轉(zhuǎn)到淘寶網(wǎng)
function fun5(){
window.top.location='https://www.taobao.com/';
}
//替換當(dāng)前頁(yè)面為淘寶網(wǎng)
function fun6(){
location.replace('https://www.taobao.com/');
}
//打開(kāi)淘寶網(wǎng)
function fun7(){
window.open('https://www.taobao.com/','淘寶網(wǎng)','width=300px,height=200px,top=100px,left=100px')
}
//后退一頁(yè)
function fun8(){
history.forward();
}
//前退一頁(yè)
function fun9(){
history.back();
}
</script>
</head>
<body>
<input type="button"value="登錄1" onclick="fun1()">
<input type="button"value="登錄2" onclick="fun2()">
<input type="button"value="登錄3" onclick="fun3()">
<input type="button"value="登錄4" onclick="fun4()">
<input type="button"value="登錄5" onclick="fun5()">
<input type="button"value="替換當(dāng)前網(wǎng)頁(yè)" onclick="fun6()">
<input type="button"value="小窗口形式打開(kāi)新網(wǎng)頁(yè)" onclick="fun7()">
<input type="button"value="前進(jìn)" onclick="fun8()">
<input type="button"value="后退" onclick="fun9()">
</body>
</html>
運(yùn)行效果展示：
以上內(nèi)容就是實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方式了
到此這篇關(guān)于JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript頁(yè)面跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript內(nèi)置對(duì)象之Array的使用小結(jié)
這篇文章主要介紹了JavaScript內(nèi)置對(duì)象之Array的使用小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年
本文介紹的這個(gè)javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年，默認(rèn)顯示當(dāng)前年份，大家可以學(xué)習(xí)下2014-05-05
純JS實(shí)現(xiàn)監(jiān)控本地文件變化
你是否曾夢(mèng)想擁有一個(gè)能夠?qū)崟r(shí)監(jiān)控本地文件變化的網(wǎng)頁(yè)應(yīng)用,現(xiàn)在,這個(gè)夢(mèng)想即將成為現(xiàn)實(shí),本文將通過(guò)純JS實(shí)現(xiàn)這一功能,感興趣的小伙伴可以了解下2025-04-04
javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了Javascript事件驅(qū)動(dòng)編程的相關(guān)資料,通過(guò)經(jīng)典案例向大家介紹Javascript事件驅(qū)動(dòng)編程，需要的朋友可以參考下2016-01-01
時(shí)間戳轉(zhuǎn)換為時(shí)間 年月日時(shí)間的JS函數(shù)
這篇文章介紹了時(shí)間戳轉(zhuǎn)換為時(shí)間 年月日時(shí)間的JS函數(shù)，有需要的朋友可以參考一下2013-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)井字棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了在CocosCreator中使用JSZip壓縮，對(duì)JSZip感興趣的同學(xué)，不妨看一下，并且親自試一試2021-04-04
layui-tree實(shí)現(xiàn)Ajax異步請(qǐng)求后動(dòng)態(tài)添加節(jié)點(diǎn)的方法
今天小編就為大家分享一篇layui-tree實(shí)現(xiàn)Ajax異步請(qǐng)求后動(dòng)態(tài)添加節(jié)點(diǎn)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript forEach中return失效問(wèn)題解決方案
這篇文章主要介紹了JavaScript forEach中return失效問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06