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

最新推荐文章于 2024-07-08 16:01:05 发布

Seabra-burangta

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量2.5k

点赞数 1

分类专栏： window 文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_42912702/article/details/121361683

版权

window 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

**需求描述：

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

实现：

 利用
   [window.open](https://developer.mozilla.org/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>

Seabra-burangta

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浏览器如何在一个tab跳转至指定的另一个tab

**需求描述：*在Home页面，点击 TO ABOUT, 打开新窗口，展示About页面，效果如图：**About页面，点击 TO HOME，此时不打开新窗口，而是跳转到原有的Home Tab上，效果如图：*实现：利用 [window.open](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)的第二个参数，指定对应的WindowName可实现打开已有窗口。 //Home 页面添加跳转B页
复制链接

扫一扫