JS 中document.URL 和 windows.location.href 的区别

JS 中 document.URL 和 window.location.href 的区别有以下几点：

1. 基本概念

document.URL 和 window.location.href 都是用来获取当前网页的 URL 地址。它们是 window 对象的属性，可以通过 window.document.URL 和 window.location.href 的方式进行获取。

2. 返回值的区别

document.URL 返回窗口的当前位置的 URL。它的返回值是一个字符串，只读属性，包含了当前文档的完整路径，例如：http://www.example.com/index.html。如果 URL 中有参数，这些参数也会包含在这个字符串中。

window.location.href 返回整个 URL（即地址栏中完整的 URL）。它的返回值也是一个字符串，但是它能够读取并修改当前浏览器所显示的文档的 URL。例如：http://www.example.com/index.html?page=2。该属性是可读写的，因此可以用它来改变浏览器的 URL，达到修改网页跳转效果的目的。

3. 实际应用区别

这里给出两个具体的例子，以更好地说明这两个属性的区别。

例子一：通过 document.URL 获取当前URL

console.log(document.URL);

上面的代码输出当前网页的完整 URL，例如：http://www.example.com/index.html

例子二：通过 window.location.href 修改网页跳转

window.location.href = "http://www.example.com/index.html?page=2";

上面的代码会将当前网页的 URL 修改为 http://www.example.com/index.html?page=2，并跳转到该网页。

结论

总结一下，document.URL 和 window.location.href 的区别主要在于：

• 返回值不同：前者返回文档路径，后者返回整个 URL；
• 功能不同：前者只读，后者可读写，可以用来修改 URL 进行网页跳转。

在实际应用中，我们可以根据需求来选择使用哪个属性。如果只需要获取当前网页的 URL，使用 document.URL 即可；如果需要动态改变网页跳转，就必须使用 window.location.href 属性了。