前端实现打开新标签页后,再次定位到该标签页

需求

A 页面中点击按钮可以打开新的标签页 B 并且向 B 页面发送消息数据。

当新的标签页 B 未关闭且符合同源策略时,再次点击按钮,可以自动跳转到标签页 B 并且发生消息数据。

B.html 

<script>
  window.onmessage = evt => {
    console.log(evt.data);
  }
</script>

页面自动定位方法

一、window.open(url, target)

A.html

<button>B Page</button>
<script>
  const button = document.querySelector("button");
  let child = null;

  button.addEventListener("click", () => {
    child = window.open("http://127.0.0.1:5500/B.html", "BPage");
    child.postMessage("hello");
  });
</script>

Window:open() 方法 - Web API 接口参考 | MDN

参数 target: 一个不含空格的字符串,用于指定加载资源的浏览上下文的名称。如果该名称无法识别现有的上下文,则会创建一个新的上下文,并赋予指定的名称。还可以使用特殊的 target 关键字_self_blank_parent 和 _top

二、window.focus()

A.html

<button>B Page</button>
<script>
  const button = document.querySelector("button");
  let child = null;

  button.addEventListener("click", () => {
    if (child) {
      child.focus();
    } else {
      child = window.open("http://127.0.0.1:5500/B.html");
    }
    child.postMessage("hello");
  });
</script>

三、a 超链接

<a href="http://127.0.0.1:5500/B.html" target="BPage">
  Open B Page
</a>

运行

  1. 如上创建 A、B html 文件
  2. 安装并使用 VsCode LiveServer 插件
  3. 点击右下角状态栏的 “Go Live”

    点击后(默认端口 5500):
  4. 打开 http://127.0.0.1:5500/A.html 进行测试即可
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值