浏览器如何在一个tab跳转至指定的另一个tab

编程入门行业动态更新时间:2024-10-24 22:18:04

**需求描述：

*在Home页面，点击 TO ABOUT, 打开新窗口，展示About页面，效果如图：*

*About页面，点击 TO HOME，此时不打开新窗口，而是 跳转到 原有的Home Tab上 ，效果如图：*

实现：

 利用
   [window.open](https://developer.mozilla/en-US/docs/Web/API/Window/open)的第二个参数，指定对应的WindowName可实现打开已有窗口。

//Home 页面添加跳转B页面入口，并利用window.open跳转至指定页面B（name指定为B，这时候，如果现有的tab已有B页面，则不会打开新窗口，反之会打开新窗口）

<button id="toAbout">TO ABOUT</button>
<script>
	  //Home.html 添加 name属性 值为’A‘
	  window.name = 'A'
      const toAbout = document.getElementById('toAbout')
      toAbout.onclick = () => {
        window.open('http://127.0.0.1:5500/about.html', 'B')
      }
    </script>

// 同理 About 页面添加跳转A页面入口，并利用window.open跳转至指定页面A（name指定为A，这时候，如果现有的tab已有A页面，则不会打开新窗口，反之会打开新窗口）

<body>
  <button id="backBtn">TO HOME</button>
  <script>
  //About.html 添加 name属性 值为'B'
    window.name = 'B'
    const btn = document.getElementById('backBtn')
    btn.onclick = () => {
      window.open('http://127.0.0.1:5500/index.html','A')
    }
  </script>
</body>