js 根 url (1) - 芒果文档

📌 相关文章

📜 js 根 url (1)

📅 最后修改于: 2023-12-03 15:17:02.683000 🧑 作者: Mango

在 Web 开发中，根 URL 是指站点的主要位置。对于不同的 Web 应用程序，根 URL 可能会不同。在 JavaScript 中，可以使用一些技巧来获取根 URL 以方便在应用程序中使用。

可以使用 window.location API 来获取浏览器当前所在页面的 URL。然后可以从 URL 中提取出根 URL。例如，如果你的站点的根目录是 https://example.com，你可以使用以下代码来获取它：

var baseUrl = window.location.protocol + "//" + window.location.host;

这里，window.location.protocol 变量包含当前页面的 URL 协议（如 http 或 https）。window.location.host 变量包含站点的主机名和端口号部分。

可以使用 document.baseURI 来获取当前页面的基础 URL（包含协议和主机名部分），而不是完整的 URL。

var baseUrl = document.baseURI;

还可以使用 HTML <base> 元素来指定整个站点的基础 URL。这个元素应该放置在 HTML 根元素中，像这样：

<!DOCTYPE html>
<html>
<head>
  <base href="https://example.com/">
</head>
<body>
  ...
</body>
</html>

在这种情况下，你可以使用以下代码来获取基本 URL：

var baseUrl = document.querySelector("base").href;

一旦你获取了根 URL，你可以使用它来构建应用程序的其他 URL。例如，如果你需要加载站点上另一个页面的资源，你可以简单地将资源的路径添加到基本 URL 上。例如，如果资源路径为 /assets/styles.css，那么它的完整 URL 为：

var resourceUrl = baseUrl + "/assets/styles.css";

然后你可以使用该 URL 来加载样式表文件，例如：

<link rel="stylesheet" href="https://example.com/assets/styles.css">

获取站点的根 URL 可以在 JavaScript 应用程序中非常有用。可以使用 window.location，document.baseURI 或 HTML <base> 元素来获取根 URL。一旦你获得了根 URL，你可以使用它来构建应用程序中的其他 URL，例如用于资源文件。