`window.open` on the second monitor in Chrome

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!

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

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.

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

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);

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…

Read More:   Difference between jQuery `click`, `bind`, `live`, `delegate`, `trigger` and `on` functions (with an example)?


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts