管理浏览器标签页

最新推荐文章于 2024-10-11 17:39:47 发布

张振涛，代码界的搬运工

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量210

点赞数 10

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_63873004/article/details/140974291

版权

我们在使用js的时候，控制页面跳转的方式有很多

1.window.location.href:可以跳转到指定的 URL。
window.location.href = 'https://www.baidu.com/';
2.window.location.replace:与 href 类似，但不会在浏览器的历史记录中创建新记录（即不能用“返回”按钮回到前一个页面）。
window.location.replace('https://www.example.com');
3.window.location.assign:功能与 href 类似，也会创建新的历史记录。
window.location.assign('https://www.example.com');
4.window.location.reload:刷新当前页面，但不跳转到其他页面。如果需要跳转，需要

重新设置 href。
window.location.reload(); // 刷新当前页面
5.window.open:它用于在新的浏览器窗口或标签页中打开指定的 URL。具体使用方式如下：
// 在新窗口或标签页中打开指定的 URL
window.open('https://www.example.com', '_blank'); 
window.open的参数

第一个参数：要打开的 URL。

第二个参数（可选）：目标窗口或标签页的名字。常用值：

_blank：在新窗口或标签页中打开。
_self：在相同的窗口或标签页中打开（默认值）。
_parent：在父窗口中打开。
_top：在整个窗口中打开（如果当前文档是框架的一部分）。
第三个参数（可选）：指定新窗口的特性（如大小、位置、是否显示工具栏等）。
window.open('https://www.example.com', '_blank', 'width=800,height=600');

我们在使用window.open第二个参数为_blank的时候，就是在新标签页中打开,如何添加判断是否已经打开过目标页面，如果打开过之后就不要再打开一次了，直接切换到目标标签页上。

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

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

<body>
  <button onclick="manageTab()">管理标签页</button>

  <script>
    // 这个变量用于存储打开的窗口对象
    let openedWindow = null;
    const url = 'https://www.example.com';

    function manageTab() {
      // 检查已经打开的窗口是否存在，并且是否仍然有效
      if (openedWindow && !openedWindow.closed) {
        // 如果窗口已经打开且未关闭，则聚焦到那个窗口
        openedWindow.focus();
      } else {
        // 否则，打开一个新窗口
        openedWindow = window.open(url, '_blank');
      }
    }
  </script>
</body>

</html>