logo标签列表

Javascript：如何获取所有打开窗口的列表

javascriptwindow
8

假设你用以下方式打开了一些窗口：

  window.open(url1,'win1');
  window.open(url2,'win2');
  window.open(url3,'win3');

每个窗口都有一个唯一的名称。

然后您刷新页面。

这3个弹出窗口仍然打开着。是否有一种方法可以列出所有打开窗口的名称并关闭它们？

这不是重复的问题。

在这个问题中，浏览器正在被刷新，因此您不能简单地使用全局数组来跟踪子窗口。

这不是重复的问题。

不，除非URL来自同一域名。那么在这些窗口之间可能存在通信的可能性，但我认为您无法以编程方式关闭它们，因为您已经失去了对这些窗口的引用。 - Felix Kling
这些URL都属于同一个域名。 - Brian McGinity
1
然后，他们可以像这里建议的那样写入localStorage。也许让子窗口监听更改并关闭它们自己。 - Felix Kling
localStorage会起作用。我希望在window对象中有一个属性，但我还没有找到。 - Brian McGinity
我不这么认为。当你重新加载页面时，你创建了一个全新的JS环境，与之前的环境没有任何关系，即使它是同一页。 - Felix Kling
显示剩余2条评论
2个回答
6

问题解决了，根据评论和研究，我会发布一个答案。

首先，对于所有评论的人，感谢你们的帮助。

答案： 没有内置的对象可以跟踪打开的窗口并在页面加载后持久化。正如Felix Kling所指出的那样，使用localStorage是一个可能的解决方法。

3

尝试使用postMessage在同一个域内的现有窗口之间进行通信。这就是我将要尝试解决相同问题的方法。请参见：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

index.htm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>pop</title>
  </head>
  <body>

    <script>

var pops = [];

window.onmessage = function(e)
{

    // todo: check domain 
    // if( e.origin )
    var data;
    try
    {
        data = JSON.parse(e.data);
    }
    catch(e)
    {
        // fail silent...?
        return;
    }
    switch(data.event)
    {
    case "RestoreOpenWindow":
        onClosePopup(e.source.name);
    case "QueryOpenWindows":
        pops.push(e.source);
        updateLabel();
        break;
    }
};

window.onload = function()
{
    window.onClosePopup = onClosePopup;
    updateLabel();
};

window.onbeforeunload = function()
{
    for(var i = 0; i < pops.length; i++) pops[i].queryOpenPopups();
};

function onClosePopup(name)
{
    for(var i = pops.length - 1; i >= 0; i--)
        if(pops[i].name === name)
            { pops.splice(i, 1); break; }
    updateLabel();
};

function openPopup()
{
    pops.push(window.open("pop/popup.htm", "pop" + pops.length, ' '));
    updateLabel();
    setTimeout(function(){
        alert('Click ok to refresh...');
        location.href = location.href;
    }, 5000);
}

function updateLabel()
{
    document.getElementById("total").innerHTML = pops.length;
    var html = [];
    for(var i = 0; i < pops.length; i++)
        html.push(pops[i].name);
    document.getElementById("names").innerHTML = html.join("<br"+"/"+">");
}


    </script>
    <button onclick="openPopup()">open popup and refresh after 5 seconds (...allow em popups...)</button></br>
    <span>total: </span><span id="total"></span></br>
    <span id="names"></span></br>
  </body>
</html>

popup.htm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>pop</title>
  </head>
  <body>

    <script>

window.queryOpenPopups = function()
{
    var count = 0;
    var hInterval = setInterval(function () {
        try
        {
            if(window.opener)
            {
                window.opener.postMessage(JSON.stringify({"event": "QueryOpenWindows", "name": window.name}), "*");
                clearInterval(hInterval);
            } else count++;
        }
        catch(e)
        {
            count++;
        }       
        if(count > 50)window.close();
    }, 100);
};

window.onbeforeunload = function(){
    window.opener.onClosePopup(window.name);
};

// restore link with opener on refresh
window.opener.postMessage(JSON.stringify({"event": "RestoreOpenWindow", "name": window.name}), "*");

window.onload=function(){ document.getElementById("name").innerHTML = window.name; };
    </script>       
    <span id="name"></span>
  </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接