JS 浏览器窗口控制

最新推荐文章于 2022-11-21 16:38:43 发布

maktubK

最新推荐文章于 2022-11-21 16:38:43 发布

阅读量1.6k

点赞数 1

分类专栏：应用场景文章标签： window js web javascript

本文链接：https://blog.csdn.net/lemaktub/article/details/112584404

版权

应用场景专栏收录该内容

4 篇文章

订阅专栏

业务场景：老系统里（非SPA）在主页面有很多子模块页面，在点击去到子模块a页面打开新窗口，如果a页面已经在浏览器打开则不打开新的窗口，切换至a页面窗口

首先，了解window对象
1.window.open

window.open('http://www.baidu.com') //打开一个新页面 返回打开的window对象本身

2.window.focus()

window.focus() //聚焦到当前页面

3.window.closed

window.closed  //可以拿到 window的开启关闭状态  true关闭  false开启

然后梳理思路

1.判断页面是否被打开，以及页面的开启关闭状态closed 
2.打开一个新的页面时，存放被打开的window对象// obj[url] = window.open(url)
3.打开一个已经打开的页面时， focus()聚焦到该页面 //obj[url].focus()

最后code

    <body>
    <button message="kk" class="pink" onclick="openBrowser('b')">click to B</button>
    <button message="kk" class="pink" onclick="openBrowser('c')">click to C</button>
    <script>
      // # 切换到当前最新打开的窗口
      var objWin = {};
      function openBrowser(url) {
        let target;
        if (url == "b") {
          target = "http://127.0.0.1:5500/bhref.html";
        } else {
          target = "http://127.0.0.1:5500/chref.html";
        }
        //判断是否打开
        console.log(objWin[url]);
        if (objWin[url] == null || objWin[url].closed) {
        //新打开的页面window存起
          objWin[url] = window.open(target);
          console.log(objWin[url]);
        } else {
       	//已经打开的页面 直接聚焦切换
          objWin[url].focus();
        }
        console.log(objWin);
      }
    </script>
  </body>

抛出问题：如果用户刷新页面，保存的变量都被清除了，功能失效

你一定会想，存到storage里面不就好了，直接给出结论:json转字符串出现 循环引用问题

sessionStorage.setItem('objWin',JSON.stringify(objWin)) //Error
JSON.stringify出现 “Converting circular structure to JSON

待续…