一键打开多个javascript弹出框答案

【问题标题】：Open multiple javascript popup boxes with one button click一键打开多个javascript弹出框
【发布时间】：2013-07-27 11:15:21
【问题描述】：

这是一个 JavaScript 问题。

我需要创建一个按钮，单击该按钮会打开 5 个子窗口（弹出框）。

屏幕左上角一个框，右上角一个，左下角一个，右下角一个，中间一个。每个框都有不同的 URL。

当主窗口关闭时，所有子窗口也应该关闭。

我只能编写打开一个弹出窗口的代码 - 无法弄清楚如何编写所有 5 个代码以通过单击按钮一次打开，然后在父窗口关闭时将它们全部关闭。

这是我目前所拥有的：

<SCRIPT language="JavaScript">
function myPopup(URL) {
popupWindow = window.open(URL,'popUpWindow','height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
</SCRIPT>

<a href="#" onclick="myPopup(this.href);return false">Open Pop-Up</a>

非常感谢任何可以帮助我的人。

感谢所有帮助我的人。通过利用这里的反馈，我整天都在研究这个项目，并提出了一些有效的代码。我不确定如何将每个弹出窗口的 url 分配给数组 - 但至少它们可以工作。

但是，当父窗口关闭时，我无法关闭所有弹出窗口。希望你能帮忙。这是新代码：

<script type="text/javascript">

/*Use Array - Open 5 new popup windows using onclick*/

function newWindow() {
 var winPop = new Array();
  winPop[winPop.length] = window.open('top_right.html','window1','scrollbars=no,width=235,height=155,left=1000,top=200,screenX=1000,screenY=200');
window.open('top_left.html','window2','scrollbars=no,width=235,height=155,left=325,top=200,screenX=325,screenY=200');
window.open('bottom_left.html','window3','scrollbars=no,width=235,height=155,left=325,top=600,screenX=325,screenY=600');
window.open('bottom_right.html','window4','scrollbars=no,width=235,height=155,left=1000,top=600,screenX=1000,screenY=600');
window.open('center_page.html','window5','scrollbars=no,width=235,height=155,left=660,top=450,screenX=660,screenY=450');
}

/*NOT WORKING FOR ME --Close all popups when parent window is closed*/

onbeforeunload = function() {
    for (var index = 0; index < winPop.length; ++index)
        winPop[index].close();
}
</script>
</head>

<body>
<div id="wrap"> <a href='' onclick='newWindow()'><img src='images/group_clicker.gif' border='0'></a> </div>
</body>

【问题讨论】：

提示：如果调用window.open()一次打开一个窗口，调用window.open()五次会做什么? （假设浏览器的弹出窗口阻止设置不会把 kibosh 放在整个事情上。）

标签： javascript

【解决方案1】：

DEMO

将所有打开的窗口保存到一个数组中。
注册beforeUnload事件，当它触发时，循环弹出close()'ing它们。

注意：我认为是 jsFiddle 或 Chrome，但每次点击打开的弹出窗口不会超过 1 个。

并且由于对弹出窗口打开的限制，您无法可靠地控制打开的弹出窗口的位置。打开诸如YUI 的panel 或jQuery(UI) 的dialogue 之类的窗口内弹出窗口可能对您很有用

function openPopup(howMany) {
    var popups = [];

    var temp;
    for (var index = 0; index < howMany; ++index) {
        popups.push(open('', '', 'height=500,width=500'));
        popups[index].document.write('popup ' + (index + 1) + ' of ' + howMany + '<br/>this will close on parent window close');
    }

    closeFunc = function() {
        for (var index = 0; index < popups.length; ++index)
            popups[index].close();
    };

    if (addEventListener)
        addEventListener('beforeunload', closeFunc, false);
    else
        attachEvent('onbeforeunload', closeFunc);
}

【讨论】：

您好，非常感谢您！我正在尝试将此数组应用于我的项目，但在关闭父窗口时关闭所有弹出窗口时遇到问题。 Mu 当前代码发布在原始问题中。
您实际上并没有将它们中的任何一个添加到数组中。使用 array.push() developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
不要忘记，如果一个答案对你有帮助，即使它没有回答你的问题（这是勾号是什么），请通过投票（点击旁边的向上箭头）让其他人知道for)。
另外，请参阅我的其他答案以解决您在问题中所做的更改。那么应该工作
只是为了让您知道，我想出了将我的代码放入演示代码的位置。脚本现在很好用！我无法对您的答案投赞成票，因为当我尝试时，出现了一条通知，上面说需要 15 个声望点才能做到这一点。我只有1分。但我确实选择了你的演示作为我使用的答案。谢谢哈希布朗！
别担心，如果您遇到知道答案的问题，请记得提供答案！

【解决方案2】：

对您的编辑的回答：

你写的

function newWindow() {
 var winPop = new Array();
  winPop[winPop.length] = window.open('top_right.html','window1','scrollbars=no,width=235,height=155,left=1000,top=200,screenX=1000,screenY=200');
window.open('top_left.html','window2','scrollbars=no,width=235,height=155,left=325,top=200,screenX=325,screenY=200');
window.open('bottom_left.html','window3','scrollbars=no,width=235,height=155,left=325,top=600,screenX=325,screenY=600');
window.open('bottom_right.html','window4','scrollbars=no,width=235,height=155,left=1000,top=600,screenX=1000,screenY=600');
window.open('center_page.html','window5','scrollbars=no,width=235,height=155,left=660,top=450,screenX=660,screenY=450');
}

你需要的是

var winPop;

function newWindow() {
    winPop = [
        open(
            'top_right.html',
            'window1',
            'scrollbars=no,width=235,height=155,left=1000,top=200,screenX=1000,screenY=200'
        ),
        open(
            'top_left.html',
            'window2',
            'scrollbars=no,width=235,height=155,left=325,top=200,screenX=325,screenY=200'
        ),
        open(
            'bottom_left.html',
            'window3',
            'scrollbars=no,width=235,height=155,left=325,top=600,screenX=325,screenY=600'
        ),
        open(
            'bottom_right.html',
            'window4',
            'scrollbars=no,width=235,height=155,left=1000,top=600,screenX=1000,screenY=600'
        ),
        open(
            'center_page.html',
            'window5',
            'scrollbars=no,width=235,height=155,left=660,top=450,screenX=660,screenY=450'
        )
    ];
}

这是一个范围问题（以及您实际上并未将窗口添加到数组中：|），winPop 需要为 global，即vard 在函数之外。

【讨论】：

嗨 Hashbrown，感谢您在这方面的支持。我明白你所说的使用全局变量的意思，我现在在我的脚本中使用了更正的代码。您的 Demo 运行良好，但遗憾的是，我整个上午都在尝试将我的 URL 和随附的属性与演示代码结合起来，并且几乎把它弄得一团糟。看来我应该在之后插入 URL 等：popups.push(open(''，但这不起作用。你能告诉我我将把这段代码放在哪里吗？我也很欣赏关于投票的提示。我是新来的在这里，不知道。

【解决方案3】：

您可以使用 for 循环打开多个窗口。一定要给弹出窗口一个唯一的名字

function myPopup(URL) {
    for (var i = 0; i < 5; i++) {
        var popupWindow = window.open(URL, i, 'height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
    }
}

【讨论】：