页面跳转功能实现

Mystical_Power114

已于 2023-06-20 22:32:15 修改

阅读量1.2k

点赞数

文章标签： java 开发语言 javascript typescript

于 2023-06-20 22:26:39 首次发布

本文链接：https://blog.csdn.net/qq_61732933/article/details/131316739

版权

本文介绍了如何使用TypeScript创建一个名为Navigator的类，包含navigateTo、navigateToNewTab和reloadPage方法，用于页面跳转、新标签页打开和页面重载。通过创建HTML按钮并添加事件监听器，展示了这些方法在实际网页中的应用。

摘要由CSDN通过智能技术生成

本篇记录的是页面的跳转，上一篇写了如何配置环境就不再赘述

编写页面跳转代码

在项目的根目录下，创建一个名为 navigation.ts 的文件。这将是我们实现页面跳转功能的主要文件。在 navigation.ts 文件中，我们将定义一个名为 Navigator 的类，该类将处理页面跳转的逻辑。

typescriptCopy code

class Navigator {
  public navigateTo(url: string): void {
    window.location.href = url;
  }

  public navigateToNewTab(url: string): void {
    window.open(url, '_blank');
  }

  public reloadPage(): void {
    location.reload();
  }
}

在上面的代码中，我们创建了一个名为 Navigator 的类，并定义了三个方法：navigateTo、navigateToNewTab 和 reloadPage。

navigateTo 方法接受一个 URL 参数，并使用 window.location.href 将页面跳转到指定的 URL。
navigateToNewTab 方法也接受一个 URL 参数，它使用 window.open 在新标签页中打开指定的 URL。
reloadPage 方法用于重新加载当前页面，它调用了 location.reload 方法。

这些方法提供了基本的页面跳转功能，您可以根据自己的需求进行扩展和定制。

使用页面跳转功能

在项目的根目录下，创建一个名为 index.html 的文件，并添加以下内容：

htmlCopy code

<!DOCTYPE html>
<html>
  <head>
    <title>Page Navigation Demo</title>
    <script src="navigation.js" defer></script>
  </head>
  <body>
    <h1>Page Navigation Demo</h1>

    <button id="navigateButton">Navigate to Google</button>
    <button id="newTabButton">Open Google in New Tab</button>
    <button id="reloadButton">Reload Page</button>

    <script>
      const navigator = new Navigator();

      const navigateButton = document.getElementById('navigateButton');
      navigateButton.addEventListener('click', () => {
        navigator.navigateTo('https://www.google.com');
      });

      const newTabButton = document.getElementById('newTabButton');
      newTabButton.addEventListener('click', () => {
        navigator.navigateToNewTab('https://www.google.com');
      });

      const reloadButton = document.getElementById('reloadButton');
      reloadButton.addEventListener('click', () => {
        navigator.reloadPage();
      });
    </script>
  </body>
</html>

在上面的代码中，我们首先引入了 navigation.js 脚本文件，该文件将在下文中生成。然后，我们创建了三个按钮，分别用于不同的页面跳转操作。每个按钮都有一个唯一的 ID，以便在 JavaScript 代码中获取它们。

在 <script> 标签中，我们创建了一个 Navigator 实例，并使用 getElementById 方法获取按钮元素。然后，我们为每个按钮添加了点击事件监听器，以调用相应的方法。