浏览器跳转新窗口再跳回来

本文介绍了如何在浏览器中实现

浏览器跳转新窗口再跳回来

场景:原页面中的链接用新tab页打开访问,操作完后(如表单提交完,点击按钮触发等)需要再跳回原页面并自动关闭新页面

实现方案

使用 window.open 进行回跳(注:a标签不能设置 noreferrer,否则跳不回来 ),具体示例如下:

1、原页面跳转链接实现

javascript 复制代码
 <a
    href='新页面url'
    target='新页面url'
    onClick={() => window.name = '原页面名称'}
>
    点击跳转
</a>

2、新页面回跳实现

javascript 复制代码
goBack={() => {
    // 如果是跳转过来的页面则回跳,没有则直接关闭当前页面
    if (window.opener) {
        window.open('', '原页面名称');
    }
    window.close();
}}

参考资料

1.https://docs.pingcode.com/baike/2675634

相关推荐
lemon_sjdk12 小时前
JavaScript 常用关键字全解析
开发语言·javascript·ecmascript
高申航12 小时前
Vue 3 + DYMO Connect Framework 实战:从标签模板到打印服务的完整实现
前端·javascript·vue.js
雪芽蓝域zzs12 小时前
分页组件 + el-config-provider 中文国际化 + 靠右布局
前端·javascript·vue.js
志尊宝13 小时前
Vue3 零基础每日笔记(016):v-for 列表渲染——key 的作用与为什么不能用 index
javascript·vue.js·笔记
toooooop813 小时前
thinkphp查询数据表最后的自增id
前端·javascript·数据库
honkun614 小时前
vue 甘特图组件 vxe-gantt 配置拖拽调整任务起止日期时实时显示 Tooltip 提示
javascript·vue.js·甘特图·vxe-gantt
资讯综合14 小时前
2026全国云渲染网站排名 不同需求用户适配榜单
开发语言·前端·javascript
HwJack2015 小时前
用 HML + CSS + JS 三段式写鸿蒙界面
javascript·css·harmonyos
linux_cfan15 小时前
HTML5 视频交互标注实践:用开源播放器 ZWPlayer 实现热区、测验与分支节点(附接入代码)
前端·javascript·音视频
YHHLAI15 小时前
基于 Next.js 16 + Redis 的全栈笔记博客系统
javascript·redis·笔记