每个前端开发都会遇到获取当前页面的完整路径的情况，特别是在制作单页面应用时。通常情况下，我们会使用JavaScript自带的方法location.href来获取当前页面的路径，但是这种方式也存在一些问题，比如说获取的路径不是绝对路径，在单页面应用中可能会导致路径出错。在这篇文章中我们将介绍一个名为getAbsolutePath的函数，它可以更加方便地获取绝对路径。
一、函数实现
function getAbsolutePath(path) {
var a = document.createElement('a');
a.href = path;
return a.href;
}
这个函数接受一个参数 path，这个参数可以是相对路径或绝对路径。函数内部创建了一个a标签，然后将路径赋值给a标签的href属性，再将这个a标签的href属性返回，这个href属性已经被浏览器自动解析成完整路径了。
接下来我们来试试getAbsolutePath函数的效果，假设我们有一个相对路径”../images/logo.jpg”，尝试使用getAbsolutePath函数把这个相对路径解析成绝对路径。
var path = '../images/logo.jpg'; var absolutePath = getAbsolutePath(path); console.log(absolutePath);
上述代码将输出完整的绝对路径，包括协议、主机名、端口号以及文件路径。
二、兼容性问题
上面的getAbsolutePath函数在绝大多数现代浏览器中都能够正常运行，但是一些老旧的浏览器（如IE6~IE7）会出现一些兼容性问题。
当a标签的href属性被赋值为相对路径时，较新的浏览器会自动将其解析为绝对路径，而早期的浏览器则不具备这个功能。因此，在一些老版本的浏览器中，我们需要手动将相对路径解析成绝对路径，方法是先获取当前页面的绝对路径，然后将相对路径拼接在其后，这种方法的实现如下：
function getAbsolutePath(path) {
var currentUrl = window.location.href;
var url = path;
if(path.indexOf("/") !== 0) {
url = currentUrl.substring(0, currentUrl.lastIndexOf("/") + 1) + path;
}
var a = document.createElement('a');
a.href = url;
return a.href;
}
这里的代码判断了传递进来的路径是否以”/”字符开头，如果是相对路径则尝试拼接成绝对路径，否则直接解析传入的路径。这样做，我们就可以兼容大部分旧版本浏览器了。
三、拓展应用
在实际的开发中，我们常常需要根据当前页面的绝对路径动态获取其它资源的路径，比如图片或文件的路径。为了方便我们动态生成这些路径，我们可以把获取绝对路径的方法封装成一个通用的函数，比如下面的getSiteUrl函数：
function getSiteUrl(path) {
var currentUrl = window.location.href;
var url = path;
if(path.indexOf("/") !== 0) {
url = currentUrl.substring(0, currentUrl.lastIndexOf("/") + 1) + path;
}
var a = document.createElement('a');
a.href = url;
return a.href;
}
function getImageUrl(url) {
return getSiteUrl("/assets/images/" + url);
}
function getCssUrl(url) {
return getSiteUrl("/assets/css/" + url);
}
function getJsUrl(url) {
return getSiteUrl("/assets/js/" + url);
}
这里我们将通用的getSiteUrl方法和具体的getImageUrl、getCssUrl、getJsUrl方法分别封装到了不同的函数中，以方便我们动态生成对应的资源路径，比如：
var logoUrl = getImageUrl("logo.png");
var cssUrl = getCssUrl("style.css");
var jsUrl = getJsUrl("app.js");
这些函数可以更加方便地让我们生成资源路径，避免了重复写绝对路径的繁琐过程。
结语
getAbsolutePath这个函数虽然看似简单，但其实包含了许多前端开发中常见的问题。写这篇文章的目的也是希望可以给各位前端开发者提供一些思路和方法，让大家在开发中更加得心应手。同时，我们也要时刻注意兼容性问题，不同浏览器有着不同的特点和限制，只有不断学习和实践，我们才能在不断变化的技术环境中立足。
原创文章，作者：PQGM，如若转载，请注明出处：https://www.506064.com/n/132033.html
微信扫一扫 
支付宝扫一扫 