js切换窗口不刷新只是激活切换窗口

web前端进阶者

已于 2023-12-26 10:56:16 修改

阅读量604

点赞数 10

分类专栏：浏览器窗口通信文章标签： javascript

于 2023-12-26 10:55:11 首次发布

本文链接：https://blog.csdn.net/u014708123/article/details/135216616

版权

浏览器窗口通信专栏收录该内容

2 篇文章 0 订阅

订阅专栏

摘要：窗口切换页面不刷新的原理，首先要同源，其次是指定window.name;方法就是调用window.open();

核心方法

/* 1.在Home页面指定 window.name */ 
window.name = 'dispatchHome'; 

/* 2.跳转到一个新页面childPage */ 
const windowFeatures = "width=910,height=699,status=no,toolbar=no,menubar=no,titlebar=no,replace=false,";
const tmpWindow = window.open(url, '_blank', windowFeatures);

/* 3.在childPage中返回 */ 
window.open('', 'dispatchHome'); // 这种应该也可以 window.open('javascript:;', name);

假如有3个页面分别命名window.name

/*页面A*/
window.name = 'pageA';
localStorage.setItem("pageAopen", 'activation');
/*页面B*/
window.name = 'pageB';
localStorage.setItem("pageBopen", 'activation');
/*页面C*/
window.name = 'pageC';
localStorage.setItem("pageCopen", 'activation');

调用window.open(‘javascript:;’, name);激活已存在窗口

// 假如pageA要跳转pageB
let isOpenB = JSON.parse(localStorage.getItem("pageBopen") || null);
if(isOpenB === 'activation'){
  window.open('javascript:;', name);
} else {
  window.open(url, name);
}

页面关闭清除内存(在不同的页面做监听, 如果关闭了就清空掉那个页面的激活状态)

window.addEventListener('beforeunload', () => {
    // localStorage.removeItem('pageAopen');
    // localStorage.removeItem('pageBopen');
    // localStorage.removeItem('pageCopen');
})