Javascript中使用A標(biāo)簽獲取當(dāng)前目錄的絕對(duì)路徑方法
一談到路徑相關(guān)的問(wèn)題，大家都會(huì)往window.location上想，確實(shí)這個(gè)對(duì)象提供了相當(dāng)多的路徑信息，其中常用的就包括：
1.location.href：當(dāng)前頁(yè)面的完整URL
2.location.pathname：當(dāng)前URL中的路徑名
3.location.hash：當(dāng)前URL中的錨點(diǎn)
4.location.search：當(dāng)前URL中的查詢(xún)參數(shù)
然而，location沒(méi)有一個(gè)屬性能直接獲得當(dāng)前目錄（不含文件名）的絕對(duì)路徑。通過(guò)Google我發(fā)現(xiàn)了一些錯(cuò)誤的方法，比如說(shuō)把URL通過(guò)“/”分離成數(shù)組，把數(shù)組的最后一項(xiàng)去掉以后再連接成字符串。但如果URL中沒(méi)有指定文件名，結(jié)果就大錯(cuò)特錯(cuò)了。
根據(jù)以往編碼的經(jīng)驗(yàn)，a元素的href屬性總是會(huì)返回絕對(duì)路徑，也就是說(shuō)它具有把相對(duì)路徑轉(zhuǎn)成絕對(duì)路徑的能力。使用下面的代碼嘗試了一下，果然成了：
var a = document.createElement('a');
a.href = './';
alert(a.href);
a = null;
很不幸地，此方法在老舊的IE 6/7下無(wú)效，當(dāng)執(zhí)行alert(a.href)時(shí)，彈出的仍然是“./”。后來(lái)，我發(fā)現(xiàn)在Stackoverflow上也有人提出了這個(gè)問(wèn)題，而解決方法也是很簡(jiǎn)單的，只要把a(bǔ)通過(guò)innerHTML注入就可以了：
var div = document.createElement('div');
div.innerHTML = '<a href="./"></a>";
alert(div.firstChild.href);
div = null;
有人可能會(huì)問(wèn)：為何不用正則表達(dá)式？我的答案是：要考慮有無(wú)文件名的情況、有無(wú)錨點(diǎn)的情況、有無(wú)查詢(xún)參數(shù)的情況，這條正則表達(dá)式可能會(huì)挺復(fù)雜的。
- 基于JS實(shí)現(xiàn)彈出一個(gè)隱藏的div窗口body頁(yè)面變成灰色并且不可被編輯
- JavaScript設(shè)置body高度為瀏覽器高度的方法
- JavaScript中window、doucment、body的解釋
- JS代碼放在head和body中的區(qū)別分析
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- javascript和jquery修改a標(biāo)簽的href屬性
- js實(shí)現(xiàn)a標(biāo)簽超鏈接提交form表單的方法
- JS 實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽的時(shí)候讓其背景更換
- js確認(rèn)刪除對(duì)話(huà)框適用于a標(biāo)簽及submit
- 在JS中a標(biāo)簽加入單擊事件屏蔽href跳轉(zhuǎn)頁(yè)面
- JavaScript實(shí)現(xiàn)獲取用戶(hù)單擊body中所有A標(biāo)簽內(nèi)容的方法
相關(guān)文章
微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁(yè)面操作方法
這篇文章主要給大家介紹了關(guān)于微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁(yè)面操作的相關(guān)資料,為了分享方便,或者制作宣傳海報(bào)之類(lèi)的,經(jīng)常需要用到微信小程序指定頁(yè)面的二維碼,讓用戶(hù)掃碼直達(dá)頁(yè)面,需要的朋友可以參考下2023-08-08
要進(jìn)行圖片編輯，最重要要能夠?qū)D片進(jìn)行裁剪。主要的實(shí)現(xiàn)分成兩部分，一部分是前端利用js進(jìn)行裁剪區(qū)域選擇，第二部分是利用PHP進(jìn)行后臺(tái)處理?，F(xiàn)在就跟大家分享一下。2016-08-08
JS實(shí)現(xiàn)獲取漢字首字母拼音、全拼音及混拼音的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取漢字首字母拼音、全拼音及混拼音的方法,涉及針對(duì)ChinesePY.js插件的使用及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
處于安全上的考慮，input[type="file"] 的文件選擇按鈕樣式并不能隨意修改(不過(guò)可以修改input 的透明度)，可能會(huì)跟設(shè)計(jì)師的設(shè)計(jì)格格不入，這時(shí)可以使用透明效果來(lái)自定義上傳按鈕2012-12-12
這篇文章主要介紹了微信小程序利用Canvas繪制圖片和豎排文字詳解，合成圖片應(yīng)該按照 Canvas 的文檔來(lái)做都沒(méi)什么問(wèn)題，主要是有個(gè)豎排文字的需求，這里和大家分享一下,需要的朋友可以參考下2019-06-06
JavaScript中forEach遍歷數(shù)組舉例詳解
許多小伙伴對(duì)forEach語(yǔ)句應(yīng)該再熟悉不過(guò)了,無(wú)論是前端遍歷渲染還是js中的邏輯處理,這篇文章主要介紹了JavaScript中forEach方法的使用方式、優(yōu)缺點(diǎn)以及實(shí)際應(yīng)用場(chǎng)景,幫助開(kāi)發(fā)者更好地掌握這一常見(jiàn)的數(shù)組遍歷技術(shù),需要的朋友可以參考下2025-03-03
flexslider.js實(shí)現(xiàn)移動(dòng)端輪播
本文主要分享了flexslider.js實(shí)現(xiàn)移動(dòng)端輪播的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
javascript 中的console.log和彈出窗口alert
這篇文章主要介紹了javascript 中的console.log和彈出窗口alert 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友參考下吧2016-08-08
本文重點(diǎn)給大家介紹js判斷json對(duì)象是否為空的知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-07-07
Javascript異步編程async實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了Javascript異步編程async實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04