JavaScript window.location.href、window.location.replace和window.location.assign的区别

window.location 是一个返回 Location对象 的属性，该对象包含有关文档当前位置的信息。这个Location对象表示与其链接的对象的位置（URL），即保存有关当前文档位置的所有信息（主机、href、端口、协议等）。

这三个命令都用于将页面重定向到另一个页面/网站，但它们在对浏览器历史记录的影响方面有所不同。

window.location.href属性：

location对象的 href 属性存储当前网页的URL。
通过改变 href 属性，用户可以导航到一个新的URL，即跳转到一个新的网页。
它会向历史列表中添加一个项目（这样当用户点击“返回”按钮时，他/她可以返回到当前页面）。
更新href属性被认为比使用assign()函数更快（因为调用函数比访问属性慢）。

语法：

window.location.href = 'https://www.geeksforgeeks.org';

示例：

这个示例展示了使用window.location.href属性的用法。

HTML

<!DOCTYPE html>
<html>
<body>
    <button onclick="getCurrentLocation()">
        Get URL
    </button>
    <button onclick="setCurrentLocation()">
        Change URL
    </button>
 
    <script>
        function getCurrentLocation() {
 
            // Get current location
            let loc = window.location.href;
            alert(loc);
        }
        function setCurrentLocation() {
 
            // Change current location
            let newloc = "https://www.geeksforgeeks.org/";
            window.location.href = newloc;
        }
    </script>
</body>
</html>

输出：

JavaScript window.location.href、window.location.replace和window.location.assign的区别

注意： 以下两行代码实现相同的功能。

Javascript

// Less favoured
window.location = 'https://www.geeksforgeeks.org'
 
// More favoured
window.location.href = 'https://www.geeksforgeeks.org'

window.location.replace属性 :

replace 函数用于在不向历史记录中添加新记录的情况下导航到新的URL。
如其名所示，该函数“替换”了历史堆栈中的最顶层条目，即通过用新条目覆盖它来删除历史列表中的最顶层条目。
因此，当用户点击“返回”按钮时，他/她将无法返回当前页面。
assign()和replace()方法之间的主要区别是replace()函数将从会话历史中删除当前页面。
replace函数不会清除整个页面历史记录，也不会使“返回”按钮无效。

语法:

window.location.replace("https://geeksforgeeks.org/web-development/")

示例： 该示例展示了如何使用window.location.replace属性。

HTML

<!DOCTYPE html>
<html>
<body>
    <button onclick="replaceLocation()">
        Replace current webpage
    </button>
    <script>
        function replaceLocation() {
 
            // Replace the current location
            // with new location
            let newloc = "https://www.geeksforgeeks.org/";
            window.location.replace(newloc);
        }
    </script>
</body>
</html>

输出：

JavaScript window.location.href、window.location.replace和window.location.assign的区别

window.location.assign属性 ：

assign 函数与 href 属性相似，用于导航到新的URL。
不过，assign 方法不显示当前位置，只用于跳转到新的位置。
与 replace 方法不同，assign 方法会在历史记录中添加一条新记录（所以当用户点击“返回”按钮时，可以返回到当前页面）。
但是，与更新 href 属性相比，调用函数被认为更安全和更可读。
assign() 方法也比 href 更受欢迎，因为它允许用户模拟函数并在测试时检查URL输入参数。

语法：

window.location.assign("https://geeksforgeeks.org/")

示例： 此示例展示了window.location.assign属性的使用。

HTML

<!DOCTYPE html>
<html>
<body>
    <button onclick="assignLocation()">
        Go to new webpage
    </button>
     
    <script>
        function assignLocation() {
 
            // Go to another webpage (geeksforgeeks)
            let newloc = "https://www.geeksforgeeks.org/";
            window.location.assign(newloc);
        }
    </script>
</body>
</html>

输出:

JavaScript window.location.href、window.location.replace和window.location.assign的区别

window.location.href	window.location.replace	window.location.assign
用于返回当前页面的URL。	用于替换当前文档。	用于加载新文档。
存储当前网页的URL。	不显示当前位置。	不显示当前位置。
将新记录添加到历史记录列表。	不向历史记录列表显示新记录。	将新记录添加到历史记录列表。
不从会话历史中删除当前页面。	从会话历史中删除当前页面。	不从会话历史中删除当前页面。
比使用assign()方法更快。	当需要从历史记录列表中删除当前网页时使用。	比使用href属性更安全可读性更强。