HTML 如何在 JavaScript 中获取基础 URL

在本文中，我们将介绍如何在 JavaScript 中获取基础 URL。在开发网页应用程序时，有时候我们需要获取当前页面的基础 URL，以便构建完整的 URL 或者处理其他与 URL 相关的操作。下面将介绍两种方法来获取基础 URL 的方式，并提供相应的示例。

阅读更多：HTML 教程

方法一：使用 `location` 对象获取基础 URL

JavaScript 的 location 对象包含了当前页面的 URL 信息，我们可以通过该对象来获取基础 URL。location 对象有一个 href 属性，它表示当前页面的完整 URL。我们可以使用 split() 方法将完整 URL 分割开来，然后再提取基础 URL 部分。

下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get Base URL Example</title>
</head>
<body>
<script>
    var baseURL = location.href.split("/").slice(0, 3).join("/");
    console.log("基础 URL 为：" + baseURL);
</script>
</body>
</html>

在这个示例中，我们通过使用 split("/").slice(0, 3).join("/")，将完整 URL 分割成数组，然后取数组的前三个元素，最后再通过 join("/") 方法将这三个元素组合成基础 URL。通过在控制台中打印出基础 URL，我们可以看到获取到的结果。

方法二：使用 `<base>` 标签获取基础 URL

除了使用 location 对象外，我们还可以使用 HTML 中的 <base> 标签来获取基础 URL。<base> 标签用于指定文档中所有相对 URL 的基础 URL。

下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="https://www.example.com/">
    <title>Get Base URL Example</title>
</head>
<body>
<script>
    var baseURL = document.baseURI;
    console.log("基础 URL 为：" + baseURL);
</script>
</body>
</html>

在这个示例中，我们在 <head> 标签内使用 <base> 标签，并通过 href 属性指定基础 URL。然后在 JavaScript 中，我们可以使用 document.baseURI 来获取基础 URL。通过在控制台中打印出基础 URL，我们可以看到获取到的结果。

总结

本文介绍了两种在 JavaScript 中获取基础 URL 的方法。第一种方法是使用 location 对象，将完整 URL 分割成数组，然后提取基础 URL 部分。第二种方法是使用 HTML 中的 <base> 标签指定基础 URL，然后通过 document.baseURI 获取基础 URL。根据具体的需求选择合适的方法来获取基础 URL，并在开发过程中灵活应用。