Javascript：保存和还原浏览器窗口大小

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?

Answer 1

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.