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

 更新时间:2015年03月02日 10:33:23   投稿:junjie  
这篇文章主要介绍了Javascript中使用A标签获取当前目录的绝对路径方法,本文讲解的方法比较特别,需要的朋友可以参考下

一谈到路径相关的问题,大家都会往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对数组操作(添加/删除/截取/排序/倒序)

    这篇文章主要介绍了JavaScript对数组操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 移动端手指操控左右滑动的菜单

    移动端手指操控左右滑动的菜单

    这篇文章主要为大家详细介绍了移动端手指操控左右滑动的菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • javascript如何实现create方法

    javascript如何实现create方法

    这篇文章主要介绍了javascript如何实现create方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • JS中数组Array的用法示例介绍

    JS中数组Array的用法示例介绍

    这篇文章主要介绍了JS中数组Array的用法,需要的朋友可以参考下
    2014-02-02
  • 深入了解JavaScript代码覆盖

    深入了解JavaScript代码覆盖

    这篇文章主要介绍了深入了解JavaScript代码覆盖 ,代码覆盖提供有关是否以及可选地应用程序的某些部分被执行的频率的信息。它通常用于判定一个测试套件执行特定代码库的全面程度。,需要的朋友可以参考下
    2019-06-06
  • javascript前端实现多视频上传

    javascript前端实现多视频上传

    这篇文章主要为大家详细介绍了javascript前端实现多视频上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • javascript中使用replaceAll()函数实现字符替换的方法

    javascript中使用replaceAll()函数实现字符替换的方法

    第一次发现JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符.
    2010-12-12
  • js排序与重组的实例讲解

    js排序与重组的实例讲解

    下面小编就为大家带来一篇js排序与重组的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS实现直接运行html代码的方法

    JS实现直接运行html代码的方法

    这篇文章主要介绍了JS实现直接运行html代码的方法,涉及javascript窗口操作相关实现技巧,需要的朋友可以参考下
    2017-03-03
  • Bootstrap3 多选和单选框(checkbox)

    Bootstrap3 多选和单选框(checkbox)

    多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。接下来通过本文给大家介绍Bootstrap3 多选和单选框,一起看看吧
    2016-12-12

最新评论