JavaScript中获取网站路径的多种方法详解

在Web开发中，了解和获取网站路径是进行页面跳转、资源定位等操作的基础，JavaScript作为前端开发的核心技术之一，提供了多种获取网站路径的方法，本文将详细介绍JavaScript中获取网站路径的常用方法，帮助开发者更好地掌握这一技能。

获取当前页面的URL

1、使用window.location对象

window.location对象包含了当前页面的URL信息，以下是一些常用的属性和方法：

- location.href：获取当前页面的完整URL。

- location.pathname：获取当前页面的路径。

- location.protocol：获取当前页面的协议（如http、https等）。

- location.host：获取当前页面的域名和端口号。

- location.port：获取当前页面的端口号。

示例代码：

console.log(window.location.href); // 输出当前页面的完整URL
console.log(window.location.pathname); // 输出当前页面的路径
console.log(window.location.protocol); // 输出当前页面的协议
console.log(window.location.host); // 输出当前页面的域名和端口号
console.log(window.location.port); // 输出当前页面的端口号

2、使用document.URL

document.URL属性同样可以获取当前页面的URL。

示例代码：

console.log(document.URL); // 输出当前页面的URL

获取网站的根路径

1、使用window.location.origin

window.location.origin属性可以获取网站的根路径，包括协议、域名和端口号。

示例代码：

console.log(window.location.origin); // 输出网站的根路径

2、使用document.baseURI

document.baseURI属性同样可以获取网站的根路径。

示例代码：

console.log(document.baseURI); // 输出网站的根路径

获取网站路径的相对路径

1、使用相对路径表达式

在JavaScript中，可以使用相对路径表达式来获取网站路径的相对路径，以下是一些常用的相对路径表达式：

- "/": 表示网站的根目录。

- "./": 表示当前目录。

- "../": 表示上一级目录。

示例代码：

console.log("/"); // 输出网站的根目录
console.log("./"); // 输出当前目录
console.log("../"); // 输出上一级目录

2、使用path模块（Node.js）

在Node.js环境中，可以使用path模块来获取网站路径的相对路径。

示例代码：

const path = require('path');
console.log(path.join(__dirname, './')); // 输出当前目录的相对路径
console.log(path.join(__dirname, '../')); // 输出上一级目录的相对路径

本文介绍了JavaScript中获取网站路径的多种方法，包括获取当前页面的URL、获取网站的根路径以及获取网站路径的相对路径，掌握这些方法可以帮助开发者更好地进行页面跳转、资源定位等操作，在实际开发过程中，根据具体需求选择合适的方法，可以提高开发效率，降低代码出错率。