Dynamisch Änderungsgrößenänderung CFWINDOW, um Inhalte anzupassen

Question

Ich arbeite derzeit an einer Site, die viele CFWindow -Objekte verwendet, und ich habe mich gefragt, ob jemand eine Möglichkeit kennt, das Fenster dynamisch zu ändern, damit der gesamte Inhalt ohne Scroll -Balken passt.

Ich habe versucht, die Überlauf = sichtbare Konfiguration zu verwenden, aber sie scheint keinen Unterschied zu machen.

Vielen Dank im Voraus für einen Rat.

Answer 1

Dies ist eine Art klassische Aufgabe, wenn Sie Pop-ups zum Anzeigen von Bildern verwenden. Es wurde durchgeführt, indem die Bildgröße und die Änderung des Laichfensters mithilfe von Messung gemessen wurden window.resizeBy(w,h). Dies ist immer noch anwendbar, denke ich.

Die zweite ähnliche Option besteht darin cfwindow Attribute width und height. Sagen Sie, Sie können den Inhalt in die erfassen cfcontent und überprüfen Sie seine Länge in Zeichen.

Bitte beachten Sie, dass diese beiden Methoden nicht zuverlässig sind, wenn Sie mit Textinhalten arbeiten, da das Rendern der Schriftarten für Benutzer sehr unterschiedlich sein kann. Es kann also nützlich sein, eine zusätzliche Höhe zu reservieren.

Andere schwierige Möglichkeiten besteht darin, zu überprüfen, ob Scrollbars für bereits geöffnetes Fenster vorhanden sind. Es gibt ein Attribut scrollHeight mit der Sie vergleichen können clientHeight und erhöhen Sie die Höhe. Dies kann in einigen Browsern möglicherweise einige hässliche "Spring" -Effekte hervorrufen, sollte aber funktionieren.

Ich war interessiert und habe einen schnellen Test der letzten Methode ausprobiert. Zuerst erzeugt Popup mit W/H = 200 und diesem Antworttext (Wörter oben) als Inhalt. Als nächstes habe ich das im Popup-Fenster gemacht:

<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>

Alarm Nr. 1:

Window Width = 200
Window Height = 200
ScrollHeight =  783

Alarm Nr. 2:

Window Width = 450
Window Height = 450
ScrollHeight =  358

Bitte beachten Sie, dass ich mich nicht zu 100% sicher bin (und jetzt nicht überprüfen kann), dass ich das nicht überprüfen kann) window.innerWidth/Height Attribute funktionieren in IE - Sie sollten auch berücksichtigen document.documentElement.clientWidth/Height Attribute.

Hoffe das hilft.