JavaScript 重定向到新 URL

概要：在本教程中，您将学习如何使用 JavaScript 重定向到新的 URL 或页面。

JavaScript 重定向简介

有时，您希望将用户从一个页面重定向到另一个具有不同 URL 的页面。

例如，您可以创建一个应用程序登录页面，根据智能手机的操作系统，将用户完全重定向到 Google Play 或 Apple Store。

为此，您需要

检测智能手机的操作系统
如果操作系统为 iOS，则重定向到 Apple Store；如果操作系统为 Android，则重定向到 Google Play。

重定向可以使用 Web 浏览器中的 JavaScript 重定向 API 完成。

重要的是要注意，JavaScript 重定向完全在 Web 浏览器中运行。因此，它不像服务器重定向那样返回状态代码 301（永久移动）。

因此，如果您将站点移动到单独的域或为旧页面创建新的 URL，则应始终使用服务器重定向。

重定向到新的 URL

要将 Web 浏览器从当前页面重定向到新的 URL，请使用location对象

location.href = 'new_url';Code language: JavaScript (javascript)

例如

location.href = 'https://tutorial.javascript.ac.cn/';Code language: JavaScript (javascript)

将值分配给location对象的href属性与调用location对象的assign()方法的效果相同

location.assign('https://tutorial.javascript.ac.cn/');Code language: JavaScript (javascript)

这两个调用都将重定向到新的 URL，并在浏览器的历史记录堆栈中创建一个条目。这意味着您可以通过浏览器的后退按钮返回到上一页。

要重定向到新的 URL 而不创建浏览器的历史记录堆栈中的新条目，请使用location对象的replace()方法

location.replace('https://tutorial.javascript.ac.cn/');Code language: JavaScript (javascript)

以下示例创建一个页面，如果操作系统为 Android 或 iOS，则将 Web 浏览器重定向到 Google Play 或 Apple Store。否则，它将显示一条消息，指示不支持该操作系统

index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript Redirect</title>

    </head>

    <body>
        <div class="message"></div>
        <script src="js/app.js"></script>
    </body>

</html>Code language: HTML, XML (xml)

js/app.js

const apps = {
  Android: 'https://play.google.com/',
  iOS: 'https://www.apple.com/store',
};

const platform = () => {
  let userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (/windows phone/i.test(userAgent)) return 'Windows Phone';
  if (/android/i.test(userAgent)) return 'Android';
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return 'iOS';
  return null;
};

const redirect = () => {
  let os = platform();
  if (os in apps) {
    location.replace(apps[os]);
  } else {
    const message = document.querySelector('.message');
    message.innerText = 'Your OS is not supported';
  }
};

redirect();Code language: JavaScript (javascript)

工作原理。

首先，定义一个apps对象，其键为操作系统，值为 Google Play 和 Apple Store 的 URL

const apps = {
  Android: 'https://play.google.com/',
  iOS: 'https://www.apple.com/store',
};Code language: JavaScript (javascript)

其次，定义一个检测操作系统的函数

const platform = () => {
  let userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (/windows phone/i.test(userAgent)) return 'Windows Phone';
  if (/android/i.test(userAgent)) return 'Android';
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return 'iOS';
  return null;
};Code language: JavaScript (javascript)

第三，创建redirect()函数，该函数检测操作系统并根据检测到的操作系统重定向 Web 浏览器

const redirect = () => {
  let os = platform();
  if (os in apps) {
    location.replace(apps[os]);
  } else {
    const message = document.querySelector('.message');
    message.innerText = 'Your OS is not supported';
  }
};Code language: JavaScript (javascript)

最后，调用redirect()函数

redirect();

重定向到相对 URL

以下脚本重定向到about.html，它与当前页面处于同一级别。

location.href = 'about.html';Code language: JavaScript (javascript)

以下脚本重定向到位于root文件夹中的contact.html页面

location.href = '/contact.html';Code language: JavaScript (javascript)

页面加载时重定向

如果您想在页面加载时重定向到新页面，请使用以下代码

window.onload = function() {
    location.href = "https://tutorial.javascript.ac.cn/";
}Code language: JavaScript (javascript)

概要

要重定向到新的 URL 或页面，请将新的 URL 分配给location.href属性或使用location.assign()方法。
location.replace()方法确实会重定向到新的 URL，但不会在浏览器的历史记录堆栈中创建条目。

本教程是否有帮助？