在用户登陆后、404 页面等情况下，经常使用到 JS 跳转新 URL 网页页面，实现页面的自动跳转。

本文将介绍 JavaScript 跳转到新 URL 网页页面的三种方法，及其使用情况分析。

JavaScript 跳转到新 URL 网页页面的三种方法：

  • window.location.href
  • window.location.assign()
  • window.location.replace()

JavaScript 跳转到新 URL 网页页面的方法对比：

  • window.location.href 与 window.location.assign() 方法相似，跳转到新页面，并创建一个新的页面入口（即：可以点击 ⬅ 返回到跳转之前的页面）。
  • window.location.replace() 跳转到新页面，不创建新的页面入口（即：不能返回到跳转之前的页面）。

JS设置window.location.href属性跳转页面

在 JavaScript 中用户可以设置 window.location.href 属性跳转页面，设置 window.location.href 属性跳转页面会模拟用户点击事件跳转页面。它会在浏览器的会话历史中创建一个新的入口，可以可以点击“返回”按钮返回到跳转之前的页面。

页面语法

window.location.href = 'https://exampleURL.com/';

跳转页面示例代码

1、JS中使用点击事件跳转页面

<html>
  <head>
    <script>
      function myFunction() {
        window.location.href = "https://www.51shizhi.com/";
      }
    </script>
  </head>
  <body>
    <h2>JS 跳转新页面</h2>
    <p>JS 设置 window.location.href 跳转到新页面</p>
    <button onclick="myFunction()">跳转页面</button>
  </body>
</html>

2、JS自动跳转到主页代码：

<html>
  <head>
    <script>
      function Redirect() {
        window.location.href = "https://www.51shizhi.com/";
      }

      document.write("5 后自动跳转到网站主页...");
      setTimeout(function () {
        Redirect();
      }, 5000);
    </script>
  </head>
  <body>
  </body>
</html>

该方法的使用情形

  • 在用户点击事件中使用JS跳转页面

  • 需要返回原本页面的时候

JS使用window.location.assign()方法跳转页面

在 JavaScript 中用户可以使用 window.location.assign() 方法跳转页面与设置 window.location.href 属性相似。它会在浏览器的会话历史中创建一个新的入口，可以点击“返回”按钮返回到跳转之前的页面。该种方法会执行一个函数，理论上没有设置 window.location.href 属性执行速度快，但是用户感觉不出来。

跳转页面语法

window.location.assign() = 'https://exampleURL.com/';

跳转页面示例代码

1、JS中使用点击事件跳转页面

<html>
  <head>
    <script>
      function myFunction() {
        window.location.assign() = "https://www.51shizhi.com/";
      }
    </script>
  </head>
  <body>
    <h2>JS 跳转新页面</h2>
    <p>JS 使用 window.location.assign() 跳转到新页面</p>
    <button onclick="myFunction()">跳转页面</button>
  </body>
</html>

2、JS自动跳转到主页代码：

<html>
  <head>
    <script>
      function Redirect() {
        window.location.assign() = "https://www.51shizhi.com/";
      }

      document.write("5 后自动跳转到网站主页...");
      setTimeout(function () {
        Redirect();
      }, 5000);
    </script>
  </head>
  <body>
  </body>
</html>

该方法的使用情形

  • 在用户点击事件中使用JS跳转页面

  • 需要返回原本页面的时候

JS使用window.location.replace()方法跳转页面

在 JavaScript 中用户可以使用 window.location.replace() 方法跳转页面。该方法的最大不同之处是它不会在浏览器的会话历史中创建新的入口，不能返回到跳转之前的页面。

跳转页面语法

window.location.replace() = 'https://exampleURL.com/';

跳转页面示例代码

1、JS中使用点击事件跳转页面

<html>
  <head>
    <script>
      function myFunction() {
        window.location.replace() = "https://www.51shizhi.com/";
      }
    </script>
  </head>
  <body>
    <h2>JS 跳转新页面</h2>
    <p>JS 使用 window.location.replace() 跳转到新页面</p>
    <button onclick="myFunction()">跳转页面</button>
  </body>
</html>

2、JS自动跳转到主页代码：

<html>
  <head>
    <script>
      function Redirect() {
        window.location.replace() = "https://www.51shizhi.com/";
      }

      document.write("5 后自动跳转到网站主页...");
      setTimeout(function () {
        Redirect();
      }, 5000);
    </script>
  </head>
  <body>
  </body>
</html>

该方法的使用情形

  • 404 页面跳转

  • 用户登陆后的跳转

  • 其他不需要返回之前页面的情形

结语

本文介绍了在 JavaScript 中使用 window.location.href , window.location.assign() , window.location.replace() 三种方法跳转到新 URL 网页页面，并介绍了每种方法的使用情况。