javascript 一键打开多个javascript弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17893983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open multiple javascript popup boxes with one button click
提问by user2624788
This is a JavaScript question.
这是一个 JavaScript 问题。
I need to create a button which, when clicked once, will open up 5 sub-windows (popup boxes).
我需要创建一个按钮，单击一次，将打开 5 个子窗口（弹出框）。
One box will be in the top left corner of the screen, one in the top right corner, one in the lower left corner, one in the lower right corner, and one in the center. Each box will have a different URL.
一个框将在屏幕的左上角，一个在右上角，一个在左下角，一个在右下角，一个在中心。每个框都有不同的 URL。
When the main window is closed, all of the sub-windows should also close.
当主窗口关闭时，所有子窗口也应关闭。
I have only been able to do the code that opens one popup - cannot figure out how to code all 5 to open at once with one button click and then close them all when the parent window closes.
我只能执行打开一个弹出窗口的代码 - 无法弄清楚如何编写所有 5 个代码以一键单击一次打开，然后在父窗口关闭时将它们全部关闭。
Here is what I have so far:
这是我到目前为止所拥有的：
<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>
Many thanks to anyone who can help me out.
非常感谢任何可以帮助我的人。
Thanks to everyone who is helping me. By utilizing the feedback here, I have worked on this project all day and have come up with some code that works. I was not sure how to assign urls for each popup to the array - but at least they work.
感谢所有帮助我的人。通过利用这里的反馈，我已经在这个项目上工作了一整天，并提出了一些有效的代码。我不确定如何将每个弹出窗口的 url 分配给数组 - 但至少它们有效。
However, I can not get all the popups to close when the parent window closes. Hope you can help. Here is the new code:
但是，当父窗口关闭时，我无法关闭所有弹出窗口。希望你能帮忙。这是新代码：
<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>
采纳答案by Hashbrown
Save all opened windows to an array.
Register for the beforeUnloadevent, and when it fires, loop through the popups close()'ing them.
将所有打开的窗口保存到一个数组中。
注册beforeUnload事件，当它触发时，循环弹出close()它们。
NB: I think it's jsFiddle or Chrome, but it won't open more than 1 popup per click.
注意：我认为它是 jsFiddle 或 Chrome，但每次点击它不会打开超过 1 个弹出窗口。
And due to restrictions placed on popup opening you cannot reliably control the position of opened popups. It may be useful for you to open in-window popups like YUI's panelor jQuery(UI)'s dialogue
并且由于对弹出窗口的限制，您无法可靠地控制打开的弹出窗口的位置。打开像YUI的面板或jQuery(UI)的对话这样的窗口内弹出窗口可能对您有用
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);
}
回答by Hashbrown
An answer to your edit:
对您的编辑的回答：
You wrote
你写了
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');
}
What you need is
你需要的是
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'
)
];
}
This is a scoping issue (as well as you not actually adding the windows to the array :|), winPop needs to be global, I.e. vard outside of the function.
这是一个范围问题（以及您实际上没有将窗口添加到数组中：|），winPop 需要global，即var函数之外。
回答by U.P
You could use a for loop to open multiple windows. Be sure to give a unique name to popup window
您可以使用 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');
}
}
