当前位置: 首页 > news >正文

面试官:打开了一个新窗口,怎么知道这个窗口已经被打开过?

前言

我们现在来想这么一个场景,在掘金的文章管理页打开了一篇文章草稿,然后点击编辑,这个时候打开新标签页 A ,再点击一次编辑,打开了标签页 B

此时如果你在 A 编辑, B 是感知不到 A 的内容变动的,因为没做协同编辑。此时再到 B 编辑,那么就可能导致A标签页的内容丢失。

别问我是怎么 YY 出来这种场景的,因为我就真的犯过这种错😓

所以可不可以做一种机制,再第二次点击编辑的时候,弹出一个提示,告诉你这个标签页已经打开过?或者说直接输入 url 的时候,能不能获取到相同的 urltab 页?

如何打开前检测

比如说我们有一个函数 openBoard ,它接受一个 id 参数,用来打开一个编辑页面:

export const openBoard = (id) => {const url = `${location.protocol}//${location.host}/board/${id}`;window.open(url);
};

我们来看一下 window.open 这个 api ,它其实是有返回值的:

一个 WindowProxy (en-US) 对象。只要符合同源策略安全要求,返回的引用就可用于访问新窗口的属性和方法。

我们可以实现一个 mapidkey ,打开的 windowvalue ,具体实现如下:

let openWindowMap = {};
export const openBoard = (id) => {const url = `${location.protocol}//${location.host}/board/${id}`;const openedWindow = openWindowMap[id];if (openedWindow && !openedWindow.closed) {// 如果窗口已存在且未关闭openedWindow.focus(); // 切换到已存在的窗口} else {const newWindow = window.open(url); // 打开一个新窗口openWindowMap[id] = newWindow;}
};

点击打开链接的时候判断一下这个链接是否被打开过,如果已经被打开过,且打开的 tab 页还存在,没有被关闭,则切换到已经存在的窗口

否则就打开一个新窗口,并维护这份关系。

效果如下

Kapture 2024-04-29 at 23.27.14.gif

最后

以上就是本文的全部内容,算是一个小知识点吧。五一假期将至,提前祝大家假期愉快~

相关文章:

面试官:打开了一个新窗口,怎么知道这个窗口已经被打开过?

前言 我们现在来想这么一个场景,在掘金的文章管理页打开了一篇文章草稿,然后点击编辑,这个时候打开新标签页 A ,再点击一次编辑,打开了标签页 B 。 此时如果你在 A 编辑, B 是感知不到 A 的内容变动的&am…...

机器学习项目实践-基础知识部分

环境建立 我们做项目第一步就是单独创建一个python环境,Python新的隔离环境 创建:python -m venv ml 使用:.\Scripts\activate python -m venv ml 是在创建一个名为 ml 的虚拟环境,这样系统会自动创建一个文件夹ml,…...

CNN卷积神经网络,TensorFlow面试题

目录 CNN卷积神经网络 什么是TensorFlow? 张量是什么 TensorFlow有什么优势?...

Android 官网Ota介绍

构建 OTA 软件包 | Android 开源项目 | Android Open Source Project...

Redis(持久化)

文章目录 1.RDB1.介绍2.RDB执行流程3.持久化配置1.Redis持久化的文件是dbfilename指定的文件2.配置基本介绍1.进入redis配置文件2.搜索dbfilename,此时的dump.rdb就是redis持久化的文件3.搜索dir,每次持久化文件,都会在启动redis的当前目录下…...

基于Flask的岗位就业可视化系统(一)

🌟欢迎来到 我的博客 —— 探索技术的无限可能! 🌟博客的简介(文章目录) 前言 本项目综合了基本数据分析的流程,包括数据采集(爬虫)、数据清洗、数据存储、数据前后端可视化等 推荐…...

嵌入式学习68-C++(运算符重载和虚函数)

知识零碎: cin >> n 相当于scanf C系统提供的6种基本函数 …...

UVA1048/LA3561 Low Cost Air Travel

UVA1048/LA3561 Low Cost Air Travel 题目链接题意输入格式输出格式 分析AC 代码 题目链接 本题是2006年ICPC世界总决赛的A题 题意 很多航空公司都会出售一种联票,要求从头坐,上飞机时上缴机票,可以在中途任何一站下飞机。比如,假…...

学习和分析各种数据结构所要掌握的一个重要知识——CPU的缓存利用率(命中率)

什么是CPU缓存利用率(命中率),我们首先要把内存搞清楚。 硬盘是什么,内存是什么,高速缓存是什么,寄存器又是什么? 我们要储存数据就要运用到上面的东西。首先里面的硬盘是可以无电存储的&#…...

IOS自动化—将WDA打包ipa批量安装驱动

前言 CSDN: ios自动化-Xcode、WebDriverAgent环境部署 ios获取原生系统应用的包 如果Mac电脑没有配置好Xcode相关环境,可以参考以上文章。 必要条件 Mac电脑,OS版本在12.4及以上(低于这个版本无法安装Xcode14,装不了Xcode14就…...

SAP PP学习笔记12 - 评估MRP的运行结果

上一章讲了MRP的概念,参数,配置等内容。 SAP PP学习笔记11 - PP中的MRP相关概念,参数,配置-CSDN博客 本章来讲 MRP跑完之后呢,要怎么评估这个MRP的运行结果。 1,Stock/Requirements List and MRP List 在…...

AndroidStudio的Iguana版的使用

1.AndroidStudio介绍 Android Studio 是用于开发 Android 应用的官方集成开发环境 (IDE)。Android Studio 基于 IntelliJ IDEA 强大的代码编辑器和开发者工具,还提供更多可提高 Android 应用构建效率的功能,例如: 基于 Gradle 的灵活构建系统…...

通过方法引用获取属性名的底层逻辑是什么?

很多小伙伴可能都用过 MyBatis-Plus&#xff0c;这里边我们构造 where 条件的时候&#xff0c;可以直接通过方法引用的方式去指定属性名&#xff1a; LambdaQueryWrapper<Book> qw new LambdaQueryWrapper<>(); qw.eq(Book::getId, 2); List<Book> list bo…...

自学错误合集--项目打包报错,运行报错持续更新中

java后端自学错误总结 一.项目打包报错2.项目打包之后运行报错 二.项目运行报错 一.项目打包报错 javac: &#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ļ&#xfffd;: E:\xx\xx\xx\docer-xx\src\main\java\xx\xx\xx\xx\xx\xx.java &#xfffd;&#xff…...

KUKA机器人故障报警信息处理(一)

1、KSS00276 机器人参数不等于机器人类型 ①登录专家模式 ②示教器操作&#xff1a;【菜单】—【显示】—【变量】—【单个】 ③名称输入&#xff1a;$ROBTRAFO[] 新值&#xff1a;TRAFONAME[] ④点击【设定值】。 2、电池报警&#xff1a; ①“充电电池警告-发现老化的蓄电池…...

数仓开发:DIM层数据处理

一、了解DIM层 这个就是数仓开发的分层架构 我们现在是在DIM层&#xff0c;从ods表中数据进行加工处理&#xff0c;导入到dwd层&#xff0c;但是记住我们依然是在DIM层&#xff0c;而非是上面的ODS和DWD层。 二、处理维度表数据 ①先确认hive的配置 -- 开启动态分区方案 -- …...

echars设置渐变颜色的方法

在我们日常的开发中&#xff0c;难免会遇到有需求&#xff0c;需要使用echars设置渐变的图表&#xff0c;如果我们需要设置给图表设置渐变颜色的话&#xff0c;我们只需要在 series 配置项中 添加相应的属性配置项即可。 方式一&#xff1a;colorStops type&#xff1a;‘lin…...

SpringBoot3项目打包和运行

六、SpringBoot3项目打包和运行 6.1 添加打包插件 在Spring Boot项目中添加spring-boot-maven-plugin插件是为了支持将项目打包成可执行的可运行jar包。如果不添加spring-boot-maven-plugin插件配置&#xff0c;使用常规的java -jar命令来运行打包后的Spring Boot项目是无法找…...

Spring Cloud Gateway的部署

不要将 Spring Cloud Gateway 部署到 Tomcat 可以将Spring Cloud Gateway打成jar包&#xff0c;并通过jar包部署&#xff0c;步骤&#xff1a; 1. 修改构建配置 确保你的pom.xml文件中的打包方式为jar。 <packaging>jar</packaging> 2 打包项目 mvn clean pack…...

算法提高之树的最长路径

算法提高之树的最长路径 核心思想&#xff1a;树形dp 枚举路径的中间节点用f1[i] 表示i的子树到i的最长距离,f2[i]表示次长距离最终答案就是max(f1[i]f2[i]) #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N …...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...