0

現在、多くのcfwindowオブジェクトを使用するサイトで作業していますが、スクロールバーを必要とせずにすべてのコンテンツが収まるように、ウィンドウのサイズを動的に変更する方法を誰かが知っているかどうか疑問に思いました。

オーバーフロー=可視構成を使用してみましたが、違いがないようです。

アドバイスをよろしくお願いします。

4

1 に答える 1

2

これは、画像を表示するためにポップアップを使用する場合の一種の古典的なタスクです。これは、画像サイズを測定し、生成されたウィンドウのサイズを を使用して変更することによって行われましたwindow.resizeBy(w,h)。これは今でも通用する方法だと思います。

2 番目の同様のオプションは、サーバー側で必要なサイズを計算し、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

属性が IE で機能するかどうかは 100% 確信が持てない (また、今は確認できない) ことに注意してください。属性window.innerWidth/Heightも考慮する必要がありdocument.documentElement.clientWidth/Heightます。

お役に立てれば。

于 2010-06-09T06:37:23.610 に答える