Динамическое изменение размера 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 атрибутов.

Надеюсь это поможет.