TypeScript 中的 window.location.href

在 TypeScript 中，window.location.href 是一个用于获取或设置当前页面的 URL 的属性。它返回一个字符串，其中包含完整的 URL，包括协议、主机名、端口、路径和查询参数。

获取当前页面的 URL

要获取当前页面的 URL，您可以使用 window.location.href 属性。以下是一个示例：

const currentUrl: string = window.location.href;
console.log(currentUrl); // 输出当前页面的 URL

设置页面的 URL

您也可以使用 window.location.href 属性来设置页面的 URL。但是，注意这样做将导致页面进行重定向。

以下是一个示例，演示如何将页面的 URL 更改为指定的 URL：

window.location.href = "https://www.example.com";

上述代码将导致浏览器加载并显示 https://www.example.com。在这种情况下，当前页面将被重定向到指定的 URL。

解析 URL 的不同部分

如果您希望获取当前页面 URL 的不同部分，如协议、主机名、路径或查询参数，可以使用 window.location 对象的其他属性。

• window.location.protocol 返回页面的协议（例如：http:, https:）。
• window.location.host 返回包含主机名和端口号的字符串。
• window.location.hostname 返回主机名部分。
• window.location.port 返回端口号部分。
• window.location.pathname 返回页面的路径部分。
• window.location.search 返回查询参数部分。

以下是示例代码，展示如何使用这些属性：

console.log(window.location.protocol); // 输出协议部分（例如：http:）
console.log(window.location.host); // 输出主机名和端口号
console.log(window.location.hostname); // 输出主机名部分
console.log(window.location.port); // 输出端口号部分
console.log(window.location.pathname); // 输出路径部分
console.log(window.location.search); // 输出查询参数部分

需要注意的是，这些属性中的一些可能不会在某些浏览器中正确返回值，特别是当 URL 不符合标准格式时。

以上就是 TypeScript 中window.location.href 的简介和用法。希望可以帮助到您！