Javascript:保存和恢复浏览器窗口大小

Question

在我的vaadin应用程序中，用户可以使用多个浏览器弹出窗口保存用户工作空间，并在稍后恢复工作空间。

我保存通过以下vaadin方法返回的浏览器窗口大小。

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

Vaadin在上面的方法中返回浏览器的内容宽度和高度，不包括标题栏和顶部的其他控件，如地址栏和工具栏。

在恢复工作空间时，我使用resizeTo() javascript方法来设置浏览器窗口的大小。

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

resizeTo()设置浏览器窗口的总宽度和高度，而不是内容区域。因此，浏览器窗口会变得小于预期大小。

有人知道实现这一目标的更好方法吗？

Answer 1

使用的方法

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

使用以下JavaScript确定"UI"维度

// 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;
} 

要使用resizeTo()做到这一点（尽管我认为你可能会遇到一些浏览器兼容性问题），你需要考虑其他一些事情：

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

另一种选择是使用RPC创建一个隐藏组件，以进行自己的JS浏览器大小计算。