23

When I'm using firefox and then using window.open('blah.com','blah','left=-30,top=-300');, the popup opens in my second display above my first one but in chrome, the popup just opens at left=0,top=0. Is there a reason why chrome is doing this and how would I fix the problem?

Thanks!

Wenfang Du
  • 8,804
  • 9
  • 59
  • 90
Andrew
  • 491
  • 1
  • 6
  • 18

6 Answers6

25

This is a bug in Chrome when the pop-up window is opened on the secondary monitor. The Chrome folks seem to say that this is a security issue (though how this is a security issue is beyond me).

Now, opening a pop-up window on a NON-EXISTENT secondary monitor, I could understand is a security issue, but... whatever.

Here's a link to a discussion on the matter:

https://code.google.com/p/chromium/issues/detail?id=137681

Chris Jordan
  • 328
  • 3
  • 9
  • 1
    Yes, I only see this issue on an extended monitor – VMN Sep 12 '17 at 07:40
  • 1
    Thanks for the link to the issue discussion. I don't see Chrome folks talking about security... For the most part, they haven't said anything :( – Neal Gokli Jan 23 '19 at 22:53
  • My issue was that I wanted to open new windows only on 2nd monitor, darn thing wouldnt budge past the first mon. Works beautifully in FF, though it also opens same URL in main window also...thats weird. Damn opinionated folks at Google ! Ok I take that back, FF doesn't even have the option to open all bookmarks in a folder, leave alone in tabs or new window (ref. https://superuser.com/questions/220708/chrome-bookmarks-in-folder-open-all-in-new-windows) – killjoy May 03 '19 at 21:13
  • I suppose one could find out how many screens a user has and on which chrome is positioned, which could be used to fingerprint the user. – leumasme Aug 02 '20 at 16:14
18

I know this is an old post but here's my solution to it. Just use the "avail*" properties of the screen object:

var windowSize = {
    width: 500,
    height: 500,
};
var windowLocation = {
    left:  (window.screen.availLeft + (window.screen.availWidth / 2)) - (windowSize.width / 2),
    top: (window.screen.availTop + (window.screen.availHeight / 2)) - (windowSize.height / 2)
};
window.open(http://example.com, '_blank', 'width=' + windowSize.width + ', height=' + windowSize.height + ', left=' + windowLocation.left + ', top=' + windowLocation.top);

Basically, the "window.screen.availLeft" gives you the other screens width so you can add you're normal center calculation to that.

Adrian Neatu
  • 1,989
  • 2
  • 19
  • 34
11
var w = 300;
var h = 300;
var left = (window.screen.width/2)-(w/2);
var top = (window.screen.height/2)-(h/2);

var win = window.open("example.html", "_blank", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h);
win.moveTo(left, top);

for Chrome...

Michal Steller
  • 175
  • 2
  • 6
  • Despite the up-votes, this doesn't work. Maybe it worked in 2013, but doesn't work in 2022. The window remains constrained to the same window as the parent window. Chrome Version 98.0.4758.102 – HankScorpio Feb 25 '22 at 19:03
1

Take a look at this StackOverflow's post Center a popup window on screen?

I've made a little upgrade for that function a couple of years ago.

function multipleScreenPopup(url, title, w, h, centered = true, moveRight = 0, moveDown = 0, resizable = "no") {
  // 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 = 0;
  var top = 0;
  if (centered === true) {
    left = ((width / 2) - (w / 2)) + dualScreenLeft;
    top = ((height / 2) - (h / 2)) + dualScreenTop;
  } else {
    left = dualScreenLeft + moveRight;
    top = dualScreenTop + moveDown;
  }

  var newWindow = window.open(url, title, 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=' + resizable + ', width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

  // Puts focus on the newWindow
  if (window.focus) {
    newWindow.focus();
    }

}

// centered as of the monitor that fired on it
multipleScreenPopup('https://google.com', '_blank', 500, 500);

// move from the left and from the top
multipleScreenPopup('https://yahoo.com', '_blank', 500, 500, false, 200, 200);
IncreMan
  • 356
  • 3
  • 10
  • In my testing on Windows 10, this works fine on a PRIMARY monitor. However, on a SECONDARY monitor this works great on Opera, unreliably on Firefox and not at all on Chrome/Edge. – TreeAndLeaf Jul 14 '20 at 04:49
0

I know this post is old but I've had similar problems:

var w = 300;
var h = 300;
var left = (window.screen.width/2)-(w/2);
var top = (window.screen.height/2)-(h/2);

var win = window.open("example.html", "_blank", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);


--centers the popup window in Firefox but not in Chrome. Also, notice, this is not outside the display area...

grasingerm
  • 1,955
  • 2
  • 19
  • 22
  • 1
    I know this is old, but I'm looking into Chrome being ... odd, now in 2018. From what I can tell chrome ignores all of the "specs" in the third argument if ANY of them are not supported. I have found no way to be able to check for this functionality at a code level in order to implement a cross-browser solution. – Ethan Green Apr 17 '18 at 18:42
0

This works, though method is experimental and may not function in the future

 var screenDetails = await window.getScreenDetails()
 if (screen.isExtended && screenDetails.screens.length > 1) {
  var newWindow = window.open(
     "https://ya.ru",
     "New Window",
    `popup,width=${myWidth},height=${myHeight},left=0,top=0`
  );
  newWindow.moveTo(screenDetails.screens[1].left + myMargin, 0);
 }
vlad
  • 112
  • 11