如何使用 JavaScript 设置 location 和 location.href?


众所周知,onclick 事件仅在用户点击元素时发生,它是一个纯 JavaScript 属性。每当您点击 onclick 事件时,它都会执行一些操作,例如显示消息或将用户重定向到另一个页面。onclick 事件在网站中应尽量少用,因为它可能会造成用户的困惑。因此,请明智地使用这些事件。

window.location 对象用于获取当前页面的 URL,并且它会将浏览器完全重定向到新页面。它可以不带前缀编写,即 window - 类似于 location.href、location 等。以下是 window location 的一些类型 -

  • location.href

  • location.hostname

  • location.protocol

  • location.assign()

  • location.pathname

在本文中,我们将学习如何使用 JavaScript 设置 location 和 location.href。

语法

以下是使用 JavaScript 在点击按钮后设置 location 和 location.href 的语法 -

location = URL
or
location.href = URL

参数

  • URL - 用于指定 URL

步骤

按照以下步骤在 JavaScript 中点击按钮后设置 location 和 location.href -

步骤 1 - 在 body 部分,我们定义了标题、按钮和脚本元素。

步骤 2 - 让我们为 HTML 文档的标题元素定义样式。

步骤 3 - 对于按钮元素,定义了 myLocation() 方法。使用此方法,当我们按下按钮时,位置将发生更改。

步骤 4 - 在 myLocation() 方法中,清楚地提到了应执行该方法功能的位置 URL。

步骤 5 - 点击按钮后,将触发 onClick 事件函数,并更改 URL 位置。

示例

在此示例中,我们将通过 JavaScript 在点击按钮后设置位置。

<html>
   <body> 
      <h2>Setting the location using the Javascript</h2>
      <p>Click the button to go to www.tutorialspoint.com</p>
      <button onclick ="myLocation()">
         Click Here to go to the URL
      </button>

      <script>
         //function to setting the location using the Javascript 
         function myLocation() {
            location = "https://tutorialspoint.com/";   
         }
      </script>
   </body>
</html>

示例

让我们再看一个使用 location.href 通过 JavaScript 设置位置的示例。

<html> 
   <body> 
      <h2>Setting the location using the Javascript<h2>
      <button onclick ="hrefLocation()">
         Click Here to go to the Tutorials Point
      </button>
      <script>
         //function to setting the location using the Javascript 
         function hrefLocation() {
            location.href = "https://www.tutorix.com/index.htm";   
         }
      </script>
   </body>
</html>

结论

在本文中,我们演示了如何设置 location 和 location.href 以及示例。我们在这里看到了两个不同的示例,我们使用了 location 属性来设置 URL 的位置。在第一个和第二个示例中,我们使用了“location 和 location.href”属性来设置指定的 URL。

更新于: 2023年2月24日

4K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告