**需求描述:
*在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>
更多推荐
浏览器如何在一个tab跳转至指定的另一个tab
发布评论