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

需求

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 进行测试即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/299750.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

彩虹易支付商户进件插件介绍

插件介绍 商户进件插件&#xff0c;支持多个进件渠道类型&#xff0c;并且可扩展。目前已有《支付宝服务商》、《支付宝直付通》、《微信支付服务商》、《微信支付收付通》进件渠道类型。 支持管理员后台和用户中心提交进件&#xff0c;支持付费进件&#xff0c;用户组限制等…

场景文本检测识别学习 day01(传统OCR的流程、常见的损失函数)

传统OCR的流程 传统OCR&#xff1a;传统光学字符识别常见的的模型主要包括以下几个步骤来识别文本 预处理&#xff1a;预处理是指对输入的图像进行处理&#xff0c;以提高文字识别的准确率。这可能包括调整图像大小、转换为灰度图像、二值化&#xff08;将图像转换为黑白两色&…

一则 MySQL 从节点 hung 死问题分析

作者通过 MySQL 从节点的一个 hung 问题&#xff0c;对数据库连接、日志、innodb status 输出等分析&#xff0c;再结合源码、堆栈等最终明确为由于 redo日志配置不合理导致 hung 死问题根本原因。 作者&#xff1a;李锡超&#xff0c;一个爱笑的江苏苏商银行 数据库工程师&…

2024年最新版FL Studio21.2.3 Build 4004 for Mac 版激活下载和图文激活教程

FL studio21中文别名水果编曲软件&#xff0c;是一款全能的音乐制作软件&#xff0c;包括编曲、录音、剪辑和混音等诸多功能&#xff0c;让你的电脑编程一个全能的录音室&#xff0c;它为您提供了一个集成的开发环境&#xff0c;使用起来非常简单有效&#xff0c;您的工作会变得…

【多线程】Callable详解

Callable接口 先看看Callable接口的源码: Callable是一个函数式接口&#xff0c;此时就可以用lambda表达式更简洁地使用它。Callable是个泛型接口&#xff0c;只有一个方法call&#xff0c;该方法返回类型就是传递进来的V类型。call方法还支持抛出异常. 与Callable对应的是Ru…

openstack中windows虚拟机时间显示异常问题处理

文章目录 一、问题描述二、元数据信息总结 一、问题描述 openstack创建出windows虚拟机的时候&#xff0c;发现时间和当前时间相差8小时&#xff0c;用起来很难受。 参考&#xff1a;https://www.cnblogs.com/hraa0101/p/11365238.html 二、元数据信息 通过设置镜像的元数据…

java对象是怎么在jvm中new出来的,在内存中查看java对象成员变量字段属性值

java对象是怎么在jvm中new出来的 查看java对象字段属性在内存中的值 java 对象 创建 流程 附上java源码 public class MiDept {private int innerFiled999;public MiDept() {System.out.println("new MiDept--------------");}public String show(int data) {Sy…

极客时间: 用 Word2Vec, LangChain, Gemma 模拟全本地检索增强生成(RAG)

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

QT的安装

● 查找国内的镜像 ○ 中国科学技术大学&#xff1a;http://mirrors.ustc.edu.cn/qtproject/ ○ 清华大学&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/qt/ ○ 北京理工大学&#xff1a;http://mirror.bit.edu.cn/qtproject/ ○ 中国互联网络信息中心&#xff1a;https:/…

C语言——#define的使用

#define定义常量 基本语法 #define name stuff //&#xff08;#define&#xff09;&#xff08;变量名&#xff09;&#xff08;定义的数值&#xff09; 这里记得&#xff0c;是不加分号的 定义常量&#xff08;这里 就要涉及我们经常说的宏定义&#xff09; 定义常量的使…

网络安全 | 什么是威胁情报?

关注WX&#xff1a;CodingTechWork 威胁情报 威胁情报-介绍 威胁情报也称为“网络威胁情报”(CTI)&#xff0c;是详细描述针对组织的网络安全威胁的数据。威胁情报可帮助安全团队更加积极主动地采取由数据驱动的有效措施&#xff0c;在网络攻击发生之前就将其消弭于无形。威…

Linux-线程知识点

目录 线程与进程区别pthread库接口介绍pthread_createpthread_self和syscall(SYS_gettid);pthread_equal测试主线程的栈空间大概是多大pthread_setname_nppthread_exitpthread_join为什么要连接退出的线程 pthread_detach 线程与进程区别 进程是一个动态的实体&#xff0c;有自…

大数据实验三-HBase编程实践

目录 一&#xff0e;实验内容 二&#xff0e;实验目的 三&#xff0e;实验过程截图及说明 1、安装HBase 2、配置伪分布式模式&#xff1a; 3、使用hbase的shell命令来操作表&#xff1a; 4、使用hbase提供的javaAPI来编程实现类似操作&#xff1a; 5、实验总结及心得体会…

Linux文件IO(4):目录操作和文件属性获取

目录 1. 前言 2. 函数介绍 2.1 访问目录 – opendir 2.2 访问目录 – readdir 2.3 访问目录 – closedir 2.4 修改文件访问权限 – chmod/fchmod 2.5 获取文件属性 – stat/lstat/fstat 2.5.1 文件属性 – struct stat 2.6 文件类型 – st_mode 3. 代码练习 3.1 要求 3.2 代…

(十一)RabbitMQ及SpringAMQP

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;…

2024-04-03 NO.4 Quest3 手势追踪抓取物体

文章目录 1 手势抓取方式1.1 Hand Grab1.2 Touch Hand Grab1.3 Distance Hand Grab 2 HandGrabExamples 示例场景2.1 Interactor 对象2.2 Interactable 对象2.2.1 父子结构2.2.2 “Hand Grab lnteractable” 脚本2.2.3 “Move Towards Target Provider” 脚本2.2.4 其他 Moveme…

linux常用目录结构(目录命令)--6986字详谈

前面与大家讨论了linux的发展与由来&#xff08;这一块挺多的&#xff0c;小编还没有编写完成&#xff0c;希望大家理解&#xff09;&#xff0c;紧接着谈到了vmware安装及运行所存在的故障&#xff08;鉴定错误&#xff0c;虚拟机没有网&#xff0c;蓝屏等常见现象的总结及处理…

Day105:代码审计-PHP原生开发篇SQL注入数据库监控正则搜索文件定位静态分析

目录 代码审计-学前须知 Bluecms-CNVD-1Day-常规注入审计分析 emlog-CNVD-1Day-常规注入审计分析 emlog-CNVD-1Day-2次注入审计分析 知识点&#xff1a; 1、PHP审计-原生态开发-SQL注入&语句监控 2、PHP审计-原生态开发-SQL注入&正则搜索 3、PHP审计-原生态开发-SQ…

Java 接口提示500,但console并不报错。

因为习惯了C语言printf打印&#xff0c;且当时并不明白try catch意义所在 如图所示&#xff0c;下添加了行号打印 但只打印出了line 89&#xff0c;无line 91&#xff0c;也无报错 所以使用try catch 包裹Sql查询封装函数 e.printStackTrace(); 果真打印出了 查看Entity类&…

【C++初阶】String在OJ中的使用(一):仅仅反转字母、字符串中的第一个唯一字母、字符串最后一个单词的长度、验证回文串、字符串相加

前言&#xff1a; &#x1f3af;个人博客&#xff1a;Dream_Chaser &#x1f388;博客专栏&#xff1a;C &#x1f4da;本篇内容&#xff1a;仅仅反转字母、字符串中的第一个唯一字母、字符串最后一个单词的长度、验证回文串、字符串相加 目录 917.仅仅反转字母 题目描述&am…