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瀏覽器大小計算。