如何实现回到原标签页功能

一、前言

最近接到一个需求,从一个标签页A打开标签页B,在标签页B要通过按钮返回标签页A,也就是回到首页功能,记录一下实现的过程。

二、基本实现原理

借助于window.open(url, name)指定name的方式返回。

在A页面设置window.name = 'A',B页面使用window.open('', 'A')的方式返回

三、第一种方案:使用window.opener.name判断

判断是否有opener以及opener的name是否是A页面

js 复制代码
const AUrl = "A.html";
if(window.opener) {
    if(window.opener.name == "A") {
        window.open("", A)
    }
} else {
    widnow.open(AUrl)
}

实现的过程中发现,A打开B页面后,这时候切换到A页面,从浏览器地址栏更改url,此时B页面访问A页面会出现跨域问题,代码做下兼容

js 复制代码
function toHome() {
    const AUrl = "A.html";
    if(window.opener) {
        try {
            let name = window.opener.name; // 获取name可能出现跨域问题
            if(name == "A") {
                window.open("", 'A'); // 可能会出现A窗口不是所需页面,暂无解决方案
            }
        } catch(e) {
            window.opener = window.open(AUrl)
        }
    } else {
        window.opener = widnow.open(AUrl)
    }
}

四、第二种方案:使用postMessage传递信息

B页面通过postMessage传递指令到A页面,A页面获取后返回当前的window.name到B页面。 B页面接收后使用window.open跳转。

js 复制代码
// A.html
window.addEventListener("message", (e) => {
    let data = e.data;
    if(data.action == "backHome") {
        let name = "A" + Math.round(Math.random() * 10000) // 生成随机数,确保name唯一
        window.name = name;
        e.source.postMessage({
            action: "backHome",
            name: name
        }, '*')
    }
})
// B.html
function toHome() {
    let url = 'A.html';
    let timer
    const callback = (e) => {
        let data = e.data;
        if(data.action && data.action == "backHome") {
            clearTimeout(timer);
            window.open("", data.name)
        }
        window.removeEventListener("message", callback)
    }
    let opener = window.opener;
    if(opener) {
        window.addEventListener("message", callback)
        opener.postMessage({
            action: "backHome"
        })
        timer = setTimeout(() => {
            window.removeEventListener("message", callback)
            window.opener = window.open(url);
        }, 300);
    } else {
        window.opener = window.open(url);
    }
}

总结

本文介绍了如何从一个新标签页跳转到原标签页,有window.opener和postMessage两种方法,window.opener方案有一定缺陷,推荐使用postMessage方式实现
相关推荐
然我9 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子14 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB241 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录10 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode10 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安12 小时前
React hooks——useReducer
前端·javascript·react.js