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() 执行此操作(尽管我认为您可能会遇到一些 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 浏览器大小。