Javascript中使用A标签获取当前目录的绝对路径方法


Posted in Javascript onMarch 02, 2015

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

1.location.href:当前页面的完整URL
2.location.pathname:当前URL中的路径名
3.location.hash:当前URL中的锚点
4.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;

有人可能会问:为何不用正则表达式?我的答案是:要考虑有无文件名的情况、有无锚点的情况、有无查询参数的情况,这条正则表达式可能会挺复杂的。
Javascript 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 #Javascript
了解Javascript的模块化开发
Mar 02 #Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 #Javascript
js实现图片漂浮效果的方法
Mar 02 #Javascript
ECMAScript 5中的属性描述符详解
Mar 02 #Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 #Javascript
JavaScript数组常用方法
Mar 02 #Javascript
You might like
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
可输入的下拉框
2006/06/19 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
javascript实现连续赋值
2015/08/10 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
node.js的事件机制
2017/02/08 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python构建深度神经网络(续)
2018/03/10 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
python3判断IP地址的方法
2021/03/04 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
AJax面试题
2014/11/25 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
海洋天堂观后感
2015/06/05 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android