问题
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.
回答1:
Result of "window.open dual-screen" search revealed this fancy nugget: Dual Monitors and 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."
// 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(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.
Update
The link is dead. Use this waybackmachine link
回答2:
window.screenX will give the position of the current monitor screen.
suppose monitor width is 1360
for monitor 1 window.screenX = 0;
for monitor 2 window.screenX = 1360;
so by adding left position with window.screenX, popup open in expected position.
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;
}
回答3:
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
回答4:
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
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.
回答5:
A javascript-based solution does not work because of security reasons.
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).
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.
Therefore, we have created an open source chrome extension for doing exactly that: flexible windows position across multi-monitor setups.
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)
The chrome extension is called "MultiWindow Positioner" and its complete free. You can get it at the chrome store here
The actual source code you find in github in the project 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.
回答6:
/**
* 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);
},
回答7:
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
来源：https://stackoverflow.com/questions/47166627/how-to-show-a-webpage-onto-another-monitor-connected-to-it-on-click-of-a-button