動態調整CFWINDOW的大小以適應內容

Question

我目前正在使用大量cfwindow對象的網站上工作，並且想知道是否有人知道動態調整窗口大小的方法，以便所有內容均可適用，而無需滾動條。

我曾嘗試使用overflow = visible配置，但它似乎沒有區別。

在此先感謝您的任何建議。

Answer 1

嗯，這是使用彈出窗口顯示圖像時的一種經典任務。它是通過測量圖像大小並使用window.resizeBy(w,h)調整衍生窗口的大小來完成的。我認爲這仍然是適用的方法。

第二個類似選項是計算服務器端所需的大小並傳遞到cfwindow屬性width和height。說，你可以將內容捕獲到cfcontent並檢查其長度的字符。

請注意，當您使用文本內容時，這兩種方法都不可靠，因爲渲染字體對於用戶而言可能真的不同。所以，保留一些額外的高度是有用的。

其他棘手的方法是檢查滾動條是否存在，對於已打開的窗口。有一個屬性scrollHeight，你可以比較clientHeight並增加高度。這可能會在某些瀏覽器中產生一些醜陋的「跳躍」效果，但它應該起作用。

我很感興趣，並嘗試過最後一種方法的快速測試。第一次產生彈出與w/h = 200和這個答案文本（上面的話）作爲內容。

<script type="text/javascript"> 
window.onload = function() { 

    // check the size before resize 
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight = " + document.body.scrollHeight); 

    if (window.innerHeight < document.body.scrollHeight) { 
     // here's where we can play with resize steps and other specific trickery 
     // now we're trying to expand size a bit 
     window.resizeBy(window.innerWidth + 50, window.innerHeight + 50); 
    } 

    // check the size after resize 
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight = " + document.body.scrollHeight); 

} 
</script> 

警報＃1：

Window Width = 200 
Window Height = 200 
ScrollHeight = 783 

警報＃2：

Window Width = 450 
Window Height = 450 
ScrollHeight = 358 

請注意，我不是100％肯定（接下來，我在彈出的窗口中這樣做並且現在無法檢查）window.innerWidth/Height屬性將在IE中起作用 - 您還應該考慮document.documentElement.clientWidth/Height屬性。

希望這會有所幫助。