JavaScript中相对地址转绝对地址的几种实现方法

核心方法一：利用Anchor元素解析（推荐）

这是最优雅且无需网络请求的方法。通过创建一个临时的锚点元素并设置其href属性，浏览器会自动解析该路径为绝对路径。
此方法不会触发任何HTTP请求，性能开销极小。

function getAbsoluteUrl(url) {
    var a = document.createElement('A');
    a.href = url; // 浏览器自动解析相对路径
    return a.href; 
}
console.log(getAbsoluteUrl("showroom/list"));

注意事项

• 兼容性：在非常旧的浏览器（如IE6）中可能无法正常工作，现代浏览器均支持。
• 上下文：解析结果依赖于当前页面的基址（base URL），即`document.baseURI`。

核心方法二：利用Image对象（不推荐）

通过创建图片对象并利用其src属性的自动解析能力来获取绝对路径。
该方法的主要缺陷是会向服务器发送一个HEAD或GET请求（即使随后立即断开连接），这会浪费带宽并可能影响性能。

function getAbsoluteUrlViaImg(url){
    var img = new Image();
    img.src = url;
    var absUrl = img.src;
    img.src = null; // 取消请求
    return absUrl;
}

局限性

• IE6及部分老旧浏览器不支持该隐式解析行为。
• 产生不必要的网络I/O操作。

核心方法三：基于正则表达式的逻辑拼接

如果不依赖DOM API，可以通过JavaScript字符串操作和正则表达式来构建绝对路径。这种方式逻辑透明，但实现较复杂，需处理多种协议前缀及相对路径层级。

function canonical_uri(src, base_path) {
    var root_page = /^[^?#]*\//.exec(location.href)[0];
    var root_domain = /^\w+\:\/\/\/?[^\/]+/.exec(root_page)[0];
    var absolute_regex = /^\w+\:\/\/;/;

    // 处理协议相对地址 (//...)
    if (/^\/\/\/?/.test(src)) {
        src = location.protocol + src;
    }
    // 处理页面相对地址
    else if (!absolute_regex.test(src) && src.charAt(0) != "/") {
        src = (base_path || "") + src;
    }
    
    // 最终补全域名或路径
    return absolute_regex.test(src) ? src : ((src.charAt(0) == "/" ? root_domain : root_page) + src);
}

如何获取原始的相对路径？

在使用DOM获取链接时，`.href`属性永远返回绝对路径。若需要获取HTML中定义的原始字符串（可能是相对的），应使用jQuery的`attr()`方法或直接访问DOM元素的`getAttribute`：

// 假设 $anchor 是jQuery对象
console.log($anchor.attr("href")); // 返回 HTML 中定义的原值（相对或绝对）
console.log($anchor[0].href);      // 始终返回解析后的绝对路径

以上就是JavaScript将相对地址转换为绝对地址的详细方法及注意事项，更多关于JavaScript URL处理的资料请关注本站其它相关文章！