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 = 'http://www.geeksforgeeks.org';

例子：

HTML

  

    
        Get URL
    
    
        Change URL
    
  
    
        function getCurrentLocation() {
  
            // Get current location
            var loc = window.location.href;
            alert(loc);
        }
        function setCurrentLocation() {
  
            // Change current location
            var newloc = "https://www.geeksforgeeks.org/";
            window.location.href = newloc;
        }
    

  

输出：

注意：以下两行代码执行相同的目的。

Javascript

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

window.location.replace 属性：

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

句法：

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

例子：

HTML

  

    
        Replace current webpage
    
    
        function replaceLocation() {
  
            // Replace the current location
            // with new location
            var newloc = "https://www.geeksforgeeks.org/";
            window.location.replace(newloc);
        }
    

  

输出：

window.location.assign 属性：

• assign函数类似于 href 属性，因为它也用于导航到新的 URL。
• 但是，assign 方法不显示当前位置，它仅用于转到新位置。
• 与 replace 方法不同，assign 方法向历史记录添加一条新记录(这样当用户单击“返回”按钮时，他/她可以返回当前页面)。
• 但是，与更新 href 属性相比，调用函数被认为更安全且更具可读性。
• 与 href 相比，assign() 方法也更受欢迎，因为它允许用户在测试时模拟函数并检查 URL 输入参数。

句法：

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

例子：

HTML

  

    
        Go to new webpage
    
      
    
        function assignLocation() {
  
            // Go to another webpage (geeksforgeeks)
            var newloc = "https://www.geeksforgeeks.org/";
            window.location.assign(newloc);
        }
    

  

输出：

window.location.replace、window.location.assign 和 window.location.href 属性的区别：

window.location.href	window.location.replace	window.location.assign
It used to return the URL of the current page.	It is used to replace the current document.	It is used to load a new document.
It stores the URL of the current webpage.	It does not show the current location.	It does not show the current location.
It adds a new record to the history list.	It does not show a new record to the history list.	It adds a new record to the history list.
It does not delete the current page from the session history.	It deletes the current page from the session history.	It does not delete the current page from the session history.
It is faster than using the assign().	It is used when the current webpage needs to be removed from the history list.	It is safer and more readable than using href.