JavaScript获取基本URL

在JavaScript中，我们可以通过几种不同的方式获取当前网页的URL。这在处理基础URL时非常有用，例如进行重定向或根据URL中的参数执行不同的操作。

使用location对象获取URL

JavaScript中的location对象表示当前窗口的URL。我们可以使用它的属性来获取URL中的不同部分。

• location.href：返回完整的URL。
• location.protocol：返回协议名称，例如"http"或"https"。
• location.hostname：返回主机名，例如"example.com"。
• location.port：返回端口号，例如"80"。
• location.pathname：返回路径和文件名，例如"/blog/index.html"。
• location.search：返回查询字符串，例如"?page=2&sort=desc"。
• location.hash：返回锚点标识符，例如"#top"。

以下是获取完整URL的示例代码片段：

const fullUrl = location.href;
console.log(fullUrl);
// 输出：https://www.example.com:80/blog/index.html?page=2&sort=desc#top

使用window对象获取URL

我们也可以使用window对象访问当前网页的URL。window对象是一个全局对象，在浏览器中代表整个窗口。

• window.location.href：返回完整的URL。

以下是获取完整URL的示例代码片段：

const fullUrl = window.location.href;
console.log(fullUrl);
// 输出：https://www.example.com:80/blog/index.html?page=2&sort=desc#top

使用document对象获取URL

我们还可以使用document对象的属性来获取URL。document对象是代表当前文档的对象，它包含了整个HTML页面的内容。

• document.URL：返回完整的URL。

以下是获取完整URL的示例代码片段：

const fullUrl = document.URL;
console.log(fullUrl);
// 输出：https://www.example.com:80/blog/index.html?page=2&sort=desc#top

结论

在JavaScript中，我们可以使用location对象、window对象或document对象的属性来获取基本URL。这些方法非常有用，因为它们可以帮助我们构建URL，处理字符串和执行不同的操作。