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://www.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>