面试官:打开了一个新窗口,怎么知道这个窗口已经被打开过?
前言
我们现在来想这么一个场景,在掘金的文章管理页打开了一篇文章草稿,然后点击编辑,这个时候打开新标签页 A
,再点击一次编辑,打开了标签页 B
。
此时如果你在 A
编辑, B
是感知不到 A
的内容变动的,因为没做协同编辑。此时再到 B
编辑,那么就可能导致A标签页的内容丢失。
别问我是怎么 YY
出来这种场景的,因为我就真的犯过这种错😓
所以可不可以做一种机制,再第二次点击编辑的时候,弹出一个提示,告诉你这个标签页已经打开过?或者说直接输入 url
的时候,能不能获取到相同的 url
的 tab
页?
如何打开前检测
比如说我们有一个函数 openBoard
,它接受一个 id
参数,用来打开一个编辑页面:
export const openBoard = (id) => {const url = `${location.protocol}//${location.host}/board/${id}`;window.open(url);
};
我们来看一下 window.open
这个 api
,它其实是有返回值的:
一个 WindowProxy
(en-US) 对象。只要符合同源策略安全要求,返回的引用就可用于访问新窗口的属性和方法。
我们可以实现一个 map
, id
为 key
,打开的 window
为 value
,具体实现如下:
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
页还存在,没有被关闭,则切换到已经存在的窗口
否则就打开一个新窗口,并维护这份关系。
效果如下
最后
以上就是本文的全部内容,算是一个小知识点吧。五一假期将至,提前祝大家假期愉快~
相关文章:
面试官:打开了一个新窗口,怎么知道这个窗口已经被打开过?
前言 我们现在来想这么一个场景,在掘金的文章管理页打开了一篇文章草稿,然后点击编辑,这个时候打开新标签页 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,这里边我们构造 where 条件的时候,可以直接通过方法引用的方式去指定属性名: LambdaQueryWrapper<Book> qw new LambdaQueryWrapper<>(); qw.eq(Book::getId, 2); List<Book> list bo…...
自学错误合集--项目打包报错,运行报错持续更新中
java后端自学错误总结 一.项目打包报错2.项目打包之后运行报错 二.项目运行报错 一.项目打包报错 javac: �Ҳ����ļ�: E:\xx\xx\xx\docer-xx\src\main\java\xx\xx\xx\xx\xx\xx.java �ÿ…...
KUKA机器人故障报警信息处理(一)
1、KSS00276 机器人参数不等于机器人类型 ①登录专家模式 ②示教器操作:【菜单】—【显示】—【变量】—【单个】 ③名称输入:$ROBTRAFO[] 新值:TRAFONAME[] ④点击【设定值】。 2、电池报警: ①“充电电池警告-发现老化的蓄电池…...
数仓开发:DIM层数据处理
一、了解DIM层 这个就是数仓开发的分层架构 我们现在是在DIM层,从ods表中数据进行加工处理,导入到dwd层,但是记住我们依然是在DIM层,而非是上面的ODS和DWD层。 二、处理维度表数据 ①先确认hive的配置 -- 开启动态分区方案 -- …...
echars设置渐变颜色的方法
在我们日常的开发中,难免会遇到有需求,需要使用echars设置渐变的图表,如果我们需要设置给图表设置渐变颜色的话,我们只需要在 series 配置项中 添加相应的属性配置项即可。 方式一:colorStops type:‘lin…...
SpringBoot3项目打包和运行
六、SpringBoot3项目打包和运行 6.1 添加打包插件 在Spring Boot项目中添加spring-boot-maven-plugin插件是为了支持将项目打包成可执行的可运行jar包。如果不添加spring-boot-maven-plugin插件配置,使用常规的java -jar命令来运行打包后的Spring Boot项目是无法找…...
Spring Cloud Gateway的部署
不要将 Spring Cloud Gateway 部署到 Tomcat 可以将Spring Cloud Gateway打成jar包,并通过jar包部署,步骤: 1. 修改构建配置 确保你的pom.xml文件中的打包方式为jar。 <packaging>jar</packaging> 2 打包项目 mvn clean pack…...
算法提高之树的最长路径
算法提高之树的最长路径 核心思想:树形dp 枚举路径的中间节点用f1[i] 表示i的子树到i的最长距离,f2[i]表示次长距离最终答案就是max(f1[i]f2[i]) #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N …...
git/gerrit使用遇到的问题
Push时出现的多个问题及其解决 branch【...】not found 这个错误通常出现在 Git 命令中指定的分支名称中包含特殊字符或者语法错误时。需要确保指定的分支名称是正确的,并且没有任何不支持的字符。 例如,如果分支名称是 feature/branch,应该…...
机器学习第二天(监督学习,无监督学习,强化学习,混合学习)
1.是什么 基于数据寻找规律从而建立关系,进行升级,如果是以前的固定算式那就是符号学习了 2.基本框架 3.监督学习和无监督式学习: 监督学习:根据正确结果进行数据的训练; 在监督式学习中,训练数据包括输…...
Rust 解决循环引用
导航 循环引用一、现象二、解决 循环引用 循环引用出现的一个场景就是你指向我,我指向你,导致程序崩溃 解决方式可以通过弱指针,而Rust中的弱指针就是Weak 在Rc中,可以实现,对一个变量,持有多个不可变引…...
ICC2:如何解决pin density过高引起的绕线问题
我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 为了追求极致的利用率,综合往往会使用大量的AOI/OAI等多pin cell,然而后端实现过程中,工具为了解决绕线难题,又会通过降低local density的方法实现反向奔赴,即便如此,绕线后仍会残留不少问题,…...
Buuctf-Misc题目练习
打开后是一个gif动图,可以使用stegsolve工具进行逐帧看。 File Format:文件格式 Data Extract:数据提取 Steregram Solve:立体试图 可以左右控制偏移 Frame Browser:帧浏览器 Image Combiner:拼图,图片拼接 所以可以知道我们要选这个Frame Browser …...
费马小定理详解
费马小定理 定义: 设 p 为素数,a 为整数,则 a p ≡ a ( m o d p ) a^p \equiv a\ (\mod p) ap≡a (modp) ,若 p ∤ a p \nmid a p∤a ,则 a p − 1 ≡ 1 ( m o d p ) a^{p-1} \equiv 1\ (\mod p) ap−1≡1 (modp)…...
PXE批量安装
系统装机的三种引导方式 u盘光盘网络装机 光盘: 1.类似于usb模式 2.刻录模式 系统安装过程 加载boot loader Boot Loader 是在操作系统内核运行之前运行的一段小程序。通过这段小程序,我们可以初始化硬件设备、建立内存空间的映射图,从…...
stm32f103c8t6最小系统板
STM32F103C8T6最小系统板是为基于ARM Cortex-M3内核的STM32F103C8T6微控制器设计的电路板,它包含了单片机正常运行所需的最基本组件。以下是构成STM32F103C8T6最小系统板的基本部分: 单片机芯片:STM32F103C8T6本身,它是一款32位微…...
QCefView 在 Linux 下的编译(更新)
在前面的文章《QT 应用程序中集成浏览器》中已经介绍过 QCefView 的构建。这几天发现 QCefView 代码进行了更新,构建方式也发生了一点点变化,所以在此更新一下 QCefView 的编译方法。 QCefView 其实包含了两个项目,一个就是 QCefView 项目本身,另外一个就是 CefViewCore。…...
无卤素产品是什么?有什么作用?
无卤素产品,即在生产过程中完全不使用卤素元素——氟、氯、溴、碘等——的产品。 卤素元素,虽然在电子设备、材料等领域应用广泛,却也可能潜藏危害。其阻燃剂,一旦在产品生命周期结束后释放,将对土壤和水体造成污染&a…...
esp32-cam 1. 出厂固件编译与测试
0. 环境 - ubuntu18 - esp32-cam - usb转ttl ch340 硬件连接 esp32-camch340板子U0RTXDU0TRXDGNDGND5V5V 1. 安装依赖 sudo apt-get install vim sudo apt install git sudo apt-get install git wget flex bison gperf python python-pip python-setuptools python-serial p…...
题目:线性代数
问题描述: 解题思路: 列相乘,然后行相加。 注意点:由于元素数据范围最大为1e6,两个元素相乘乘积最大为1e12,如果元素类型为int则在乘的过程中就会爆炸,所以需要开long long类型。 AC代码…...
docker学习笔记3:VmWare CentOS7安装与静态ip配置
文章目录 一、安装CentOS71、下载centos镜像2、安装二、设置静态ip三、xshell连接centos本专栏的docker环境是在centos7里安装,因此首先需要会安装centos虚拟机。 本篇博客介绍如何在vm虚拟机里安装centos7。 一、安装CentOS7 1、下载centos镜像 推荐清华源,下载如下版本 …...
leetcode 547.省份数量
思路:dfs 或者这道题用bfs也是可以的。 这道题有点迷惑性,这里的数组给的是无向图的数组,而并不是地图,这里需要着重注意一下。 而后,这里的状态数组st没必要是二维的,我们并不会去遍历所给的数组&#…...
Qt5 框架学习及应用 — 对象树
Qt 对象树 对象树概念Qt为什么使用对象树 ?将对象挂到对象树上 对象树概念 对象树:对于树的概念,相信许多学过数据结构的同学应该都不会陌生。在学习数据结构的时候我们所接触的什么二叉树、多叉树、哈夫曼树、AVL树、再到红黑树、B/B树………...
Ansible自动化运维工具---Playbook
一、playbook playbook是剧本的意思 通过 task 调用 ansible 的模块将多个 play 组织在一 个playbook中运行。 playbook本身由以下各部分组成: Tasks: 任务,即调用模块完成的某操作Variables: 变量Templates: 模板Handlers: 处理器,当某条…...
什么是接口和类?Java中的集合框架有哪些主要接口和类?
Java中的集合框架有哪些主要接口和类? Java中的集合框架(Java Collections Framework)提供了一套丰富的接口和类,用于存储和操作对象的集合。以下是Java集合框架中的主要接口和类: 主要接口 Collection: 这…...
算法学习笔记(最短路——Bellman-Ford)
B e l l m a n — F o r d Bellman—Ford Bellman—Ford是一种单源最短路径算法,可以用于边权为负的图,但是只能用于小图。 大概过程: 枚举每一条边,更新可以更新的节点(起点到自己距离为 0 0 0,从地点开…...
try-catch-finally的省略与springboot
在 Java 中,try-catch 块是用于捕获和处理异常的结构,它可以帮助您在代码中处理可能发生的异常情况。在某些情况下,您可能希望省略 try-catch 块并将异常向上抛出,让调用者处理异常。这种情况通常适用于以下情况: 方法…...
容器Docker:轻量级虚拟化技术解析
引言 随着云计算和虚拟化技术的飞速发展,容器技术以其轻量级、高效、可移植的特性,逐渐成为了软件开发和部署的新宠。在众多容器技术中,Docker以其简单易用、功能强大的特点,赢得了广泛的关注和应用。本文将全面介绍Docker的基本概…...
windows 系统中cuda 12.1 环境安装
文章目录 1. 安装cuda 12.11.1 下载1.2 安装 cuda1.2.1 安装步骤1.2.2 环境变量安装1.3 安装cuDNN1.3.1 安装1.3.2 cuDNN配置验证2. anaconda 安装2.1 安装2.2 环境变量配置3. 报错解决1. 安装cuda 12.1 首先通过nvidia-smi 查看可以安装的CUDA最高版本...
字节和旷视提出HiDiffusion,无需训练,只需要一行代码就可以提高 SD 生成图像的清晰度和生成速度。代码已开源。
字节和旷视提出HiDiffusion,无需训练,只需要一行代码就可以提高 SD 生成图像的清晰度和生成速度。代码已开源。 支持将图像生成的分辨率提高至40964096,同时将图像生成速度提升1.5至6倍。 支持所有 SD 模型同时也支持 SD 模型的下游模型&…...
linux下dd制作启动U盘
dd命令是比较推荐的一种Linux环境中制作U盘启动盘的方式,无需安装额外的工具,基本上所有Linux发行版都集成了这个命令。 1、插入U盘; 2、打开终端; 3、确认U盘路径,在终端中输入:sudo fdisk -l 例如&am…...
springboot整合mybatis配置多数据源(mysql/oracle)
目录 前言导入依赖坐标创建mysql/oracle数据源配置类MySQLDataSourceConfigOracleDataSourceConfig application.yml配置文件配置mysql/oracle数据源编写Mapper接口编写Book实体类编写测试类 前言 springboot整合mybatis配置多数据源,可以都是mysql数据源ÿ…...
练习项目后端代码解析切面篇(Aspect)
前言 之前注解篇时我说,通常情况下一个自定义注解一般对应一个切面,虽然项目里的切面和注解个数相同,但是好像有一个名字看起来并不对应,无所谓,先看了再说。 ExceptionLogAspect切面 我在里面做了具体注释&#x…...
TypeScript常见面试题第六节
题目二十六:TypeScript 中的装饰器? 一、讲解视频 TS面试题二十六:TypeScript 中的可选链? 二、题目解析 本题目考察可选链的相关知识,可选链是比较新的一个语法,是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在,也不会出现错误。如果可选链 ?. 前面的值为…...
LeetCode 面试经典150题 228.汇总区间
题目: 给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说,nums 的每个元素都恰好被某个区间范围所覆盖,并且不存在属于某个范围但不属于 nums 的数字 x 。 列表中的每个区…...
大数据分析入门10分钟快速了解SQL
SQL是什么? SQL全称Structured Query Language(结构化查询语言”) 为什么要用SQL? SQL通用 常见的表格分析操作,Excel也能做,为什么不用呢? 因为处理上亿行大数据时,Excel并不够用。 而常见的大数据引…...
设置多用户远程登录windows server服务器
##设置多用户远程登录windows server服务器 ###1、远程登录windows server 2016 运行—>mstsc—>远程IP地址—>用户和密码 2、远程windows服务器设置多用户策略 运行—>gpedit.msc->计算机配置—管理模板—windows组件—远程桌面服务—远程桌面会话主机----连…...
一文了解栈
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、栈是什么?二、栈的实现思路1.顺序表实现2.单链表实现3.双向链表实现 三、接口函数的实现1.栈的定义2.栈的初始化3.栈的销毁4.入栈5.出栈6.返回栈…...