js获取当前页的URL与window.location.href简单方法

获取当前页面的URL是前端开发中的常见需求。常见的方法有两种，一种是使用location对象的href属性，另一种是使用window对象的location属性。这篇文章将介绍这两种方法的区别，并提供简单的代码示例来演示如何使用它们。

1. 使用location.href属性获取当前页面的URL

location对象是window对象的一个属性，它包含了当前窗口文档(document)的一些信息。其中，href属性包含了当前页面的URL。因此，我们可以使用如下代码获取当前页面的URL：

var url = location.href;
console.log(url);

上述代码中，我们首先定义了一个变量url，然后通过location.href属性获取当前页面的URL，并将其赋值给变量url。最后，我们通过console.log()方法将这个URL打印到控制台中。

2. 使用window.location属性获取当前页面的URL

window对象代表了一个浏览器窗口，它也是JavaScript中的一个全局对象。window对象的location属性包含了当前页面的URL信息。因此，我们可以使用如下代码获取当前页面的URL：

var url = window.location.href;
console.log(url);

上述代码中，我们定义了一个变量url，并通过window.location.href属性获取了当前页面的URL。最后，我们通过console.log()方法将这个URL打印到控制台中。

3. 区别与注意事项

从代码示例中可以看出，使用location.href属性和window.location.href属性可以得到相同的结果，即当前页面的URL。它们的区别在于前者访问了location对象的href属性，而后者访问了window对象的location属性的href属性。因此，它们本质上是等价的。

另外，需要注意的是，如果我们只想获取当前页面的URL中的协议、主机和端口号等信息，可以使用location对象的protocol、hostname和port属性。例如，如下代码将获取当前页面的协议、主机和端口号，并将它们拼接成一个完整的URL：

var url = location.protocol + '//' + location.hostname + ':' + location.port + '/';
console.log(url);

上述代码中，我们首先通过location.protocol属性获取当前页面的协议，然后通过location.hostname属性获取当前页面的主机名，再通过location.port属性获取当前页面的端口号。最后，我们将这些信息拼接成一个完整的URL，并将它打印到控制台中。

总之，获取当前页面的URL是前端开发中的常见需求。我们可以使用location.href属性和window.location.href属性来获取当前页面的URL，并根据实际需求来选择使用哪一个。同时，需要注意不同属性之间的区别和使用方法。