IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

使用Javascript获取页面所在目录的绝对路径

Heero's Blog 2012-05-28 12:36:58 累计浏览 2,782 次
本机暂存

一谈到路径相关的问题,大家都会往window.location上想,确实这个对象提供了相当多的路径信息,其中常用的就包括:

  • location.href:当前页面的完整URL
  • location.pathname:当前URL中的路径名
  • location.hash:当前URL中的锚点
  • location.search:当前URL中的查询参数

然而,location没有一个属性能直接获得当前目录(不含文件名的绝对路径。通过Google我发现了一些错误的方法,比如说把URL通过“/”分离成数组,把数组的最后一项去掉以后再连接成字符串。但如果URL中没有指定文件名,结果就大错特错了。

根据以往编码的经验,我记得a元素的href属性总是会返回绝对路径,也就是说它具有把相对路径转成绝对路径的能力。使用下面的代码尝试了一下,果然成了:

var a = document.createElement('a');
a.href = './';
alert(a.href);
a = null;

很不幸地,此方法在老旧的IE 6/7下无效,当执行alert(a.href)时,弹出的仍然是“./”。后来,我发现在Stackoverflow上也有人提出了这个问题,而解决方法也是很简单的,只要把a通过innerHTML注入就可以了:

var div = document.createElement('div');
div.innerHTML = '<a href="./"></a>";
alert(div.firstChild.href);
div = null;

有人可能会问:为何不用正则表达式?我的答案是:要考虑有无文件名的情况、有无锚点的情况、有无查询参数的情况,这条正则表达式可能会挺复杂的。

同分类推荐文章

  1. 新特性速递:focus()行为新增focusVisible控制 (2026-05-29 16:23:06)
  2. Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()` (2026-05-28 21:00:00)
  3. Revealing Text With CSS letter-spacing (2026-05-27 20:37:33)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,266)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,268)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,805)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,764)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,688)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,245)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,146)
  8. 什么是全栈工程师? (累计阅读 13,946)
  9. include(“./file.php”)和include(“file.php”)区别 (累计阅读 12,720)
  10. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,641)