Javascript: save and restore browser window sizes

Question

In my vaadin application, user can save a user workspace with multiple browser popup windows and restore the workspace later.

I save the browser window size returned by following vaadin methods.

Page.getBrowserWindowHeight();
Page.getBrowserWindowWidth();

Vaadin returns the content width and height of the browser in above methods, not including title bar and other controls in the top such as the address bar and toolbar.

When restoring a workspace, I use resizeTo() javascript method to set the size of the browser windows.

JavaScript.getCurrent().execute("resizeTo(" + windowWidth + "," + windowHeight + ")");

resizeTo() sets the total width and height of the browser window, not the content area. Due to this, the browser window becomes smaller than the intended size.

Does anyone know of a better method to achieve this?

@DavidBlaney it is the built in window.resizeTo() function. http://www.w3schools.com/jsref/met_win_resizeto.asp — Lahiru Chandima, Apr 12 '16 at 10:10

score 1 · Accepted Answer · edited May 23 '17 at 10:28

The methods you are using

Page.getBrowserWindowHeight();
Page.getBrowserWindowWidth();

use the following JavaScript to determine the 'UI' dimensions

// Window height and width
var cw = 0;
var ch = 0;
if (typeof(window.innerWidth) == 'number') {
    // Modern browsers
    cw = window.innerWidth;
    ch = window.innerHeight;
} else {
    // IE 8
    cw = document.documentElement.clientWidth;
    ch = document.documentElement.clientHeight;
}

To do this using resizeTo() (although I think you may run in to some browser compatibility issues) you need to take into account a few other thing:

function doResize(width, height){
    // Window height and width
    var cw = 0;
    var ch = 0;
    if(typeof(window.innerWidth) == 'number') {
        // Modern browsers
        cw = width + (window.outerWidth - window.innerWidth);
        ch = height + (window.outerHeight - window.innerHeight);
    } else {
        // IE 8
        cw = width + (document.documentElement.offsetWidth-document.body.offsetWidth);
        ch = height + (document.documentElement.offsetHeight-document.body.offsetHeight); 
    }
    window.resizeTo(cw, ch);
}

Another option would be to create a hidden component with RPC to do your own JS browser size calculations.

It is difficult to use the way you suggested to get the size of the window since it is in javascript (I need the size in the vaadin backend). By the way, the sizes are the same as what is given by Page.getBrowserWindowHeight(). Your doResize() method did what I wanted. — Lahiru Chandima, Apr 12 '16 at 14:10

Javascript: save and restore browser window sizes

1 Answers1