JavaScript 怎样获取 URL

在Web开发中，经常需要获取当前页面的URL或者对URL进行操作。JavaScript提供了多种方法来实现这一功能，下面将详细介绍一些常用的方式。

1. window.location对象

window.location对象包含了当前页面的URL信息。通过它可以获取到URL的各个部分，例如：

• 获取完整URL：使用window.location.href可以获取到当前页面的完整URL，包括协议、域名、路径、查询参数和哈希值等。示例代码如下：

const currentURL = window.location.href;
console.log(currentURL);

• 获取协议：window.location.protocol可以获取到当前URL所使用的协议，如http:或https:。
• 获取域名：window.location.hostname可以获取到当前URL的域名部分。

2. document.URL属性

document.URL属性也可以获取到当前页面的完整URL，它与window.location.href的效果类似。示例代码如下：

const url = document.URL;
console.log(url);

3. 解析URL

有时候我们需要对URL进行解析，获取其中的特定部分，例如查询参数或路径。可以使用URL构造函数来实现。示例代码如下：

const url = new URL(window.location.href);
const pathname = url.pathname;
const searchParams = url.searchParams;
console.log(pathname);
console.log(searchParams.get('paramName'));

4. 获取哈希值

哈希值通常用于在页面内定位到特定的元素或标识页面状态。可以使用window.location.hash来获取URL中的哈希值部分。示例代码如下：

const hash = window.location.hash;
console.log(hash);

5. 注意事项

在使用JavaScript获取URL时，需要注意兼容性问题。不同的浏览器可能对某些属性或方法的支持有所不同。在实际应用中，可以根据具体需求选择合适的方法，并进行适当的兼容性处理。

通过以上介绍的方法，我们可以在JavaScript中方便地获取和操作URL，为Web开发提供了更多的灵活性和功能。