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中.min.js和.js文件的区别讲解

    JavaScript中.min.js和.js文件的区别讲解

    今天小编就为大家分享一篇关于JavaScript中.min.js和.js文件的区别讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • 关于js陀螺仪的理解分析

    关于js陀螺仪的理解分析

    这篇文章主要给大家介绍了关于js陀螺仪的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 教你巧用 import.meta 实现热更新的问题

    教你巧用 import.meta 实现热更新的问题

    import.meta 是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象,它包含了这个模块的信息,这篇文章主要介绍了巧用 import.meta 实现热更新的问题,需要的朋友可以参考下
    2022-04-04
  • layer.open的自适应及居中及子页面标题的修改方法

    layer.open的自适应及居中及子页面标题的修改方法

    今天小编就为大家分享一篇layer.open的自适应及居中及子页面标题的修改方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS冷知识之不起眼但有用的String.raw方法

    JS冷知识之不起眼但有用的String.raw方法

    String.raw是JavaScript中模板字符串的一个标签函数,它的作用是将模板字符串不转义的原始字符串内容返回,接下来通过本文给大家介绍JS冷知识之不起眼但有用的String.raw方法,需要的朋友可以参考下
    2022-06-06
  • JS中使用gulp实现压缩文件及浏览器热加载功能

    JS中使用gulp实现压缩文件及浏览器热加载功能

    这篇文章主要介绍了JS中使用gulp实现压缩文件及浏览器热加载功能,需要的朋友可以参考下
    2017-07-07
  • redux-saga 初识和使用

    redux-saga 初识和使用

    这篇文章主要介绍了redux-saga 初识和使,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 本地存储cookie、localStorage和sessionStorage示例详解

    本地存储cookie、localStorage和sessionStorage示例详解

    cookie、localStorage 和 sessionStorage都是在客户端存储数据的方式,但它们之间有一些区别,下面这篇文章主要给大家介绍了关于JavaScript中cookie、localStorage和sessionStorage的相关资料,需要的朋友可以参考下
    2024-03-03
  • 如何解决js函数防抖、节流出现的问题

    如何解决js函数防抖、节流出现的问题

    这篇文章主要介绍了如何解决js函数防抖、节流出现的问题。SyntheticEvent对象是通过合并得到的。 这意味着在事件回调被调用后,SyntheticEvent 对象将被重用并且所有属性都将被取消。 因此,您无法以异步方式访问该事件。,需要的朋友可以参考下
    2019-06-06
  • JavaScript 数组中插入元素的实例方法

    JavaScript 数组中插入元素的实例方法

    这篇文章主要介绍了如何在 JavaScript 数组中插入元素,在本文中,我们学习了使用 splice() 方法将元素添加到数组的开始、末尾或任何位置的各种方法,需要的朋友可以参考下
    2023-09-09

最新评论