JavaScript获取当前页的URL与window.location.href简单方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要获取当前页面的URL信息。在JavaScript中，有多种方式可以获取当前页的URL，其中最常用的是window.location.href属性。本文将介绍如何使用JavaScript获取当前页面的URL以及window.location.href的详细用法，并提供示例代码和指导意义。

获取当前页面的URL

要获取当前页面的URL，可以使用window.location对象。该对象包含了当前页面URL的相关信息，比如协议、主机名、路径等。以下是获取当前页面完整URL的代码：

var url = window.location.href;

这段代码将返回一个字符串，即当前页面的完整URL。例如，如果当前页面的URL为https://www.example.com/path/to/page.html?query=string，那么上述代码将返回的字符串为https://www.example.com/path/to/page.html?query=string。

除了window.location.href外，还可以使用其他属性来获取当前页面的URL的不同部分，例如：

window.location.protocol：获取当前页面的协议，例如http:或https:
window.location.hostname：获取当前页面的主机名，例如www.example.com
window.location.port：获取当前页面的端口号，例如80或443
window.location.pathname：获取当前页面的路径，例如/path/to/page.html
window.location.search：获取当前页面查询字符串，例如?query=string
window.location.hash：获取当前页面的锚点（即URL中的#后面的部分），例如#section1

以下是获取当前页面各个部分URL的代码示例：

var protocol = window.location.protocol; // "https:"
var hostname = window.location.hostname; // "www.example.com"
var port = window.location.port; // "443"
var pathname = window.location.pathname; // "/path/to/page.html"
var search = window.location.search; // "?query=string"
var hash = window.location.hash; // "#section1"

window.location.href的详细用法

window.location.href是一个字符串，包含了当前页面的完整URL。除了获取当前页面的URL外，还可以使用该属性来修改当前页面的URL。例如，以下代码将把当前页面跳转到另一个页面：

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

该代码将会把当前页面跳转到https://www.example.com/newpage.html。

除了直接修改URL外，还可以使用window.location.assign()方法来实现同样的效果：

window.location.assign("https://www.example.com/newpage.html");

此外，window.location.replace()方法也可以用来实现页面跳转，但与assign()方法不同的是，该方法会替换当前页面的历史记录，因此用户无法通过浏览器的“后退”按钮返回到之前的页面。

示例代码

下面是一个获取当前页面URL和修改页面URL的完整示例代码：

// 获取当前页面URL
var url = window.location.href;
console.log("当前页面URL为：" + url);

// 修改页面URL
window.location.href = "https://www.example.com/newpage.html";

指导意义

本文介绍了如何使用JavaScript获取当前页面的URL以及window.location.href的详细用法，并提供了示例代码和指导意义。了解这些知识点可以帮助前端开发者更好地处理URL相关问题，比如实现页面跳转、动态生成URL等。同时，在编写JavaScript代码时，应当遵循良好的编程习惯，确保代码质量和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/2219