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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
JavaScript实现两个数组的交集
Mar 25 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
php xml文件操作代码(一)
2009/03/20 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php动态函数调用方法
2015/05/21 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
js实现随机抽奖
2020/03/19 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python向excel中写入数据的方法
2019/05/05 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
思想品德课教学反思
2014/02/10 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
军训通讯稿范文
2015/07/18 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Java设计模式中的命令模式
2022/04/28 Java/Android
Python循环之while无限迭代
2022/04/30 Python