用一个按钮点击打开多个Javascript弹出框

Question

用一个按钮点击打开多个Javascript弹出框

javascript

3

这是一个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>

- user2624788

1

提示：如果调用 window.open() 打开一个窗口，那么调用 window.open() 五次会发生什么？（假设浏览器的弹出窗口阻止设置不会完全禁止此行为。） - nnnnnn

3个回答

0

你可以使用 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');
    }
}

- U.P

0

回答您的编辑：

您写道

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需要是全局的，即在函数外部var声明。

- Hashbrown

嗨，Hashbrown，感谢您一直陪伴我。我明白您所说的使用全局变量的意思，并且现在已经在我的脚本中使用了更正后的代码。您的演示非常完美，但不幸的是，我整个早上都在尝试将我的URL和相应的属性与演示代码结合起来，但几乎搞砸了。看起来我应该在“popups.push(open(''”之后插入URL等内容，但这并没有起作用。您能告诉我在哪里放置这段代码吗？此外，我感谢您关于点赞的提示。我是新手，在这方面不太了解。 - user2624788

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hashbrown · Accepted Answer

演示

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

NB：我认为这是jsFiddle或Chrome的问题，但它不会在单击时打开多个弹出窗口。

由于对弹出窗口的打开放置了限制，您无法可靠地控制打开弹出窗口的位置。对于您来说，可能有用的是打开窗口内的弹出窗口，例如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);
}