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属性。

希望这有帮助。

动态调整CFWINDOW的大小以适应内容

1 个答案: