Open a frame in center of current window

Question

How can I open a frame in the center of the current window?

The JS is simple:

window.open("http://www.google.com", "activate-frame", "height=600,width=800,centerscreen,chrome=yes");

However the "centerscreen" attribute is not actually opening the frame in the center of the screen.

JSFiddle: http://jsfiddle.net/ecm9bpox/1/

Answer 1

You have to calculate the screen width and height before placing the window on the screen.

Something like this:

function popupwindow(url, title, w, h) {
  var left = (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=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 

popupwindow('http://google.com','Test Frame',600, 800)

As answered here, in a similar Stack Overflow post.

Answer 2

It's not clear, but according to the Mozilla documentation it may only work with chrome scripts.

var win = window.open("chrome://myextension/content/about.xul", "aboutMyExtension", "chrome,centerscreen");

The first parameter to window.open is the URI of the XUL file that describes the window and its contents.

https://developer.mozilla.org/en-US/docs/Working_with_windows_in_chrome_code

Answer 3

To show new popup window at the center of the parent one use its properties screenTop, screenLeft, innerHeight and innerWidth to calculate the center point and then pass it to window.open.

Here's working example:

var opts = {
    url: "https://example.com",  // Popup URL here
    width: 600,                  // Popup width here
    height: 600                  // Popup height here
};
var parentCenter = {
    top: window.screenTop + (window.innerHeight / 2),
    left: window.screenLeft + (window.innerWidth / 2)
};
var offset = {
    top: parentCenter.top - (opts.height / 2),
    left: parentCenter.left - (opts.width / 2)
};  
window.open(opts.url, 'mywindow', 'width=' + opts.width + ',height=' + opts.height + ',top='+offset.top+',left=' + offset.left);