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

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

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

场景:原页面中的链接用新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

相关推荐
吴声子夜歌5 分钟前
Vue3——v-for指令
前端·javascript·vue
音仔小瓜皮13 分钟前
【Vue】什么时候用Ref?什么时候用shallowRef?
前端·javascript·vue.js
ZC跨境爬虫20 分钟前
海南大学交友平台开发实战 day11(实现性别图标渲染与后端数据关联+Debug复盘)
前端·python·sqlite·html·json
GISer_Jing22 分钟前
前端JS面试6大核心考点详解
前端·javascript·面试
yyuuuzz28 分钟前
独立站搭建:从基础到避坑的实战分享
前端·javascript·github
星空椰1 小时前
JavaScript 基础入门:从零开始掌握变量与数据类型
开发语言·前端·javascript·ecmascript
竹林8181 小时前
用wagmi v2构建DeFi前端:从连接钱包到读取合约数据的完整实战与避坑指南
前端·javascript
Kinghiee1 小时前
从零打造生产级前端错误监控 SDK:架构设计与 Vue3 实践
前端·javascript·vue.js·去重·错误捕获·上报·离线持久化
吴声子夜歌1 小时前
Vue3——元素样式绑定
前端·javascript·vue.js·es6
xingpanvip1 小时前
PHP+JS+CSS打造动态星盘计算器
javascript·css·php