js獲取當(dāng)前頁(yè)的URL與window.location.href簡(jiǎn)單方法
利用JavaScript獲取當(dāng)前頁(yè)的URL,這個(gè)問(wèn)題起來(lái)好像很復(fù)雜,如果第一次去想這個(gè)問(wèn)題,很多人估計(jì)又在琢磨到底又是哪個(gè)神一般的Javascript函數(shù)。
其實(shí)不是,Javascript獲取當(dāng)前頁(yè)的URL的函數(shù)就是我們經(jīng)常用來(lái)重定向的window.location.href。
比如如下函數(shù):
<script>
var url=window.location.href;
var loc = url.substring(url.lastIndexOf('/')+1, url.length);
alert("url="+url+",loc="+loc);
</script>
如果當(dāng)前頁(yè)面的url為http://localhost:6666/myphp/mobile/pc1.php,那么其運(yùn)行結(jié)果如下:

上面的函數(shù)同時(shí)展示如何獲取當(dāng)前頁(yè)名稱(chēng)的做法。
獲取利用window.location.href的變量獲取整個(gè)url之后,要哪一部分的地址,利用substring,indexof等字符串處理函數(shù)對(duì)獲取到的url進(jìn)行處理,截取你想要的部分。
平時(shí)利用window.location.href做重定向,就是改變整個(gè)瀏覽器的url,
如果后面沒(méi)有賦值,這就成了獲取當(dāng)前值的語(yǔ)句。
與document.getElementById("xx").value一樣,你能夠修改,就能夠獲取了。
當(dāng)然,如果獲取一些特定的值,比如當(dāng)前的協(xié)議與端口,就不用截取字符串這么麻煩了。
直接利用window.location.port拿端口,window.location.protocol拿協(xié)議,window.location.search還能拿url問(wèn)號(hào)后面的部分,當(dāng)然也可以利用它們來(lái)改相應(yīng)的值。
比如如下代碼:
alert("protocol:"+window.location.protocol+",port:"+window.location.port);
其運(yùn)行結(jié)果如下:

補(bǔ)充:substring(start,stop) 知識(shí)
語(yǔ)法
語(yǔ)法stringObject.substring(start,stop)

返回值
一個(gè)新的字符串,該字符串值包含 stringObject 的一個(gè)子字符串,其內(nèi)容是從 start 處到 stop-1 處的所有字符,其長(zhǎng)度為 stop 減 start。
說(shuō)明
substring() 方法返回的子串包括 start 處的字符,但不包括 stop 處的字符。
如果參數(shù) start 與 stop 相等,那么該方法返回的就是一個(gè)空串(即長(zhǎng)度為 0 的字符串)。如果 start 比 stop 大,那么該方法在提取子串之前會(huì)先交換這兩個(gè)參數(shù)。
以上這篇js獲取當(dāng)前頁(yè)的URL與window.location.href簡(jiǎn)單方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- javascript 中設(shè)置window.location.href跳轉(zhuǎn)無(wú)效問(wèn)題解決辦法
- JavaScript Window 打開(kāi)新窗口(window.location.href、window.open、window.showModalDialog)
- 關(guān)于js中window.location.href,location.href,parent.location.href,top.location.href的用法與區(qū)別
- 快速解決js中window.location.href不工作的問(wèn)題
- js中window.location.href的用法大全
- javascript中window.location.href的用法
- JS操作BOM時(shí)window.location.href跳轉(zhuǎn)后頁(yè)面不刷新問(wèn)題解決辦法
相關(guān)文章
JS?new操作原理及手寫(xiě)函數(shù)模擬實(shí)現(xiàn)示例
這篇文章主要為大家介紹了JS?new操作原理及手寫(xiě)函數(shù)模擬實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
echarts中tooltip添加點(diǎn)擊事件代碼示例
這篇文章主要給大家介紹了關(guān)于echarts中tooltip添加點(diǎn)擊事件的相關(guān)資料,echarts tooltip點(diǎn)擊事件是指當(dāng)用戶(hù)點(diǎn)擊圖表中的提示框(tooltip)時(shí)觸發(fā)的事件,需要的朋友可以參考下2023-07-07
原生JavaScript實(shí)現(xiàn)批量獲取表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了如何使用原生JavaScript實(shí)現(xiàn)批量獲取表單數(shù)據(jù),文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vite打包優(yōu)化vite-plugin-compression的使用示例詳解
這篇文章主要介紹了vite打包優(yōu)化vite-plugin-compression的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
詳解javascript new的運(yùn)行機(jī)制
這篇文章主要介紹了javascript new的運(yùn)行機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-01-01
js如何實(shí)現(xiàn)設(shè)計(jì)模式中的模板方法
都知道在js中如果定義兩個(gè)相同名稱(chēng)的方法,前一個(gè)方法就會(huì)被后一個(gè)方法覆蓋掉,使用此特點(diǎn)就可以實(shí)現(xiàn)模板方法,感興趣的朋友可以了解下本文哈2013-07-07

