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

摘要：窗口切换页面不刷新的原理，首先要同源，其次是指定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');
})