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

时间:2016-04-12 03:39:56

标签: javascript vaadin

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

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

resizeTo()

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

恢复工作区时,我使用JavaScript.getCurrent().execute("resizeTo(" + windowWidth + "," + windowHeight + ")"); javascript方法设置浏览器窗口的大小。

resizeTo()

{{1}}设置浏览器窗口的总宽度和高度,而不是内容区域。因此,浏览器窗口会小于预期的大小。

有没有人知道更好的方法来实现这个目标?

1 个答案:

答案 0 :(得分: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()执行此操作(虽然我认为您可能会遇到某些browser compatibility issues),但您需要考虑其他一些事项:

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浏览器大小计算。