javascript 多显示器/双显示器系统上的 window.open() - 窗口在哪里弹出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16363474/
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
window.open() on a multi-monitor/dual-monitor system - where does window pop up?
提问by Bob Brunius
When using javascript window.open() on a multi-monitor system, how do you control which monitor, or where in the display space the popup opens? It seems out of control to me and otherwise random in it's behavior.
在多显示器系统上使用 javascript window.open() 时，如何控制弹出窗口打开的显示器或显示空间中的哪个位置？这对我来说似乎失控了，否则它的行为是随机的。
回答by BrianH
Result of "window.open dual-screen" search revealed this fancy nugget: Dual Monitors and Window.open
“window.open 双屏”搜索结果揭示了这个奇特的金块：双显示器和 Window.open
"When the user clicks on a link that opens a new window using window.open. Make the window appear on the same monitor as its' parent."
“当用户点击一个使用 window.open 打开新窗口的链接时。使窗口与其父窗口显示在同一监视器上。”
// Find Left Boundry of the Screen/Monitor
function FindLeftScreenBoundry()
{
// Check if the window is off the primary monitor in a positive axis
// X,Y X,Y S = Screen, W = Window
// 0,0 ---------- 1280,0 ----------
// | | | --- |
// | | | | W | |
// | S | | --- S |
// ---------- ----------
if (window.leftWindowBoundry() > window.screen.width)
{
return window.leftWindowBoundry() - (window.leftWindowBoundry() - window.screen.width);
}
// Check if the window is off the primary monitor in a negative axis
// X,Y X,Y S = Screen, W = Window
// 0,0 ---------- -1280,0 ----------
// | | | --- |
// | | | | W | |
// | S | | --- S |
// ---------- ----------
// This only works in Firefox at the moment due to a bug in Internet Explorer opening new windows into a negative axis
// However, you can move opened windows into a negative axis as a workaround
if (window.leftWindowBoundry() < 0 && window.leftWindowBoundry() > (window.screen.width * -1))
{
return (window.screen.width * -1);
}
// If neither of the above, the monitor is on the primary monitor whose's screen X should be 0
return 0;
}
window.leftScreenBoundry = FindLeftScreenBoundry;
Now that the code is written, you can now use window.open to open a window on the monitor the parent window is on.
编写代码后，您现在可以使用 window.open 在父窗口所在的监视器上打开一个窗口。
window.open(thePage, 'windowName', 'resizable=1, scrollbars=1, fullscreen=0, height=200, width=650, screenX=' + window.leftScreenBoundry() + ' , left=' + window.leftScreenBoundry() + ', toolbar=0, menubar=0, status=1');
If it successfully allows you to open a popup on the same screen as the document launching it, then with similar effort one should be able to modify it to behave differently.
如果它成功地允许您在启动它的文档的同一屏幕上打开一个弹出窗口，那么通过类似的努力，您应该能够修改它以使其表现不同。
Note that, as the length of code implies, there is no built-in function for understanding multiple monitors in jquery/javascript/browsers, only that the dual-screen desktop is simply an enlarged single cartesian plane instead of two discrete planes.
需要注意的是，正如代码长度所暗示的，jquery/javascript/browsers 中没有内置的理解多显示器的函数，只是双屏桌面只是一个放大的单个笛卡尔平面，而不是两个离散的平面。
Update
更新
The link is dead. Use this waybackmachine link
链接已死。使用这个waybackmachine链接
回答by Ravikumar GH
window.screenXwill give the position of the current monitor screen.
window.screenX将给出当前监视器屏幕的位置。
suppose monitor width is 1360
假设监视器宽度为 1360
for monitor 1 window.screenX = 0;
对于监视器 1 window.screenX = 0;
for monitor 2 window.screenX = 1360;
监视器 2 window.screenX = 1360;
so by adding left position with window.screenX, popup open in expected position.
所以通过添加左侧位置window.screenX，弹出窗口在预期位置打开。
function openWindow() {
var width = 650;
var left = 200;
left += window.screenX;
window.open(thePage,'windowName','resizable=1,scrollbars=1,fullscreen=0,height=200,width=' + width + ' , left=' + left + ', toolbar=0, menubar=0,status=1');
return 0;
}
回答by dryymoon
FUNCTION:
功能：
function PopupCenter(url, title, w, h, opts) {
var _innerOpts = '';
if(opts !== null && typeof opts === 'object' ){
for (var p in opts ) {
if (opts.hasOwnProperty(p)) {
_innerOpts += p + '=' + opts[p] + ',';
}
}
}
// Fixes dual-screen position, Most browsers, Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(url, title, _innerOpts + ' width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
}
USAGE:
用法：
PopupCenter('http://www.google.com','google.com','900','500', {toolbar:1, resizable:1, location:1, menubar:1, status:1});
It will also work on minimized windows
它也适用于最小化的窗口
回答by vimal prakash
None of the above solutions are works correctly. in terms of exact Center,
上述解决方案均无法正常工作。就精确中心而言，
I tried this , It works fine for me in chrome and firefox
我试过了，它在 chrome 和 firefox 中对我来说很好用
var sY = screenY;
if (sY < 0) {
sY = 0;
}
var totalScreenWidth = (screenX + window.outerWidth + sY);
if (totalScreenWidth > screen.width) {
totalScreenWidth = totalScreenWidth / 2;
} else {
totalScreenWidth = 0;
}
windowobj.moveTo(totalScreenWidth + ((screen.width - h) / 2), ((screen.height - h) / 2));
But this also have issue if the second monitors browser is viewed half in first and another half in second.
但是，如果第二个监视器浏览器在第一次查看一半，在第二次查看另一半，这也会有问题。
回答by Igor Lino
A javascript-based solution does not work because of security reasons.
由于安全原因，基于 javascript 的解决方案不起作用。
I have another idea for you, why not use a chrome extension for handling the positioning. (no security problem there) It is of course, only for chrome(maybe thats fine for you).
我有另一个想法给你，为什么不使用 chrome 扩展来处理定位。（那里没有安全问题）当然，仅适用于 chrome（也许这对您来说很好）。
Background: We had related difficulties. Internal webapp that opens multiple documents in windows, and need to be placed in other monitors. The javascript does not support this, for security reasons and only a native extension can properly work with the tabs/windows objects.
背景：我们遇到了相关的困难。在windows中打开多个文档的内部webapp，需要放置在其他显示器中。出于安全原因，javascript 不支持此功能，并且只有本机扩展才能正确处理选项卡/窗口对象。
Therefore, we have created an open source chrome extension for doing exactly that: flexible windows position across multi-monitor setups.
因此，我们创建了一个开源的 chrome 扩展来做到这一点：跨多显示器设置灵活的窗口位置。
In your case you could easily define a rule per monitor where and how it would appear. You can do it in the options page of the chrome extension. (as shorcut you can, after installation, go directly there using)
在您的情况下，您可以轻松地为每个监视器定义一个规则，它的显示位置和方式。您可以在 chrome 扩展的选项页面中进行。（作为快捷方式，您可以在安装后直接使用）
The chrome extension is called "MultiWindow Positioner" and its complete free. You can get it at the chrome store here
chrome 扩展名为“MultiWindow Positioner”，并且完全免费。您可以在此处的 chrome 商店购买
The actual source code you find in github in the project chrome-multiwindow-positioner
您在 github 项目chrome-multiwindow-positioner 中找到的实际源代码
Disclaimer: I am the maintainer of the open source (MIT) github project. If there any interesting idea, or comments feel free to share them here.
免责声明：我是开源 (MIT) github 项目的维护者。如果有任何有趣的想法或评论，请随时在此处分享。
回答by Mykola Uspalenko
Here is a solution:
这是一个解决方案：
function openWindow( url, winnm, options)
{
var wLeft = parseInt( typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft );
var left = 0;
if( (result = /left=(\d+)/g.exec(options)) ) {
left = parseInt(result[1]);
}
if(options)
{
options = options.replace("left="+left,"left="+(parseInt(left) + wLeft));
w = window.open( url, winnm, options );
}
else
{
w = window.open( url, winnm );
}
if(w)
w.focus();
return w;
}
You just need to replace in your js files: window.open to openWindow
你只需要在你的 js 文件中替换：window.open 到 openWindow
回答by Alex Skrypnyk
/**
* Display popup window in the center of the screen.
*/
function popupWindow(url, title, w, h) {
// Use window.screenX to center the window horizontally on multi-monitor
// setup.
var left = window.screenX + (screen.width / 2) - (w / 2);
var top = (screen.height / 2) - (h / 2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
},
