تغيير حجم cfwindow بشكل ديناميكي لتناسب المحتوى
-
25-09-2019 - |
سؤال
أعمل حاليًا على موقع يستخدم الكثير من كائنات CFWindow وكنت أتساءل عما إذا كان أي شخص يعرف طريقة لتغيير حجم النافذة ديناميكيًا بحيث يناسب جميع المحتوى دون الحاجة إلى تمرير أشرطة.
لقد حاولت استخدام التكوين المرئي = لا يبدو أنه يحدث فرقًا.
شكرا مقدما على أي نصيحة.
المحلول
حسنًا ، هذه مهمة كلاسيكية عند استخدام المنبثقة لعرض الصور. تم ذلك عن طريق قياس حجم الصورة وتغيير حجم النافذة التي تفرج window.resizeBy(w,h)
. هذا لا يزال طريقة قابلة للتطبيق ، على ما أعتقد.
الخيار الثاني المماثل هو حساب الحجم المطلوب على جانب الخادم والانتقال إلى cfwindow
صفات width
و height
. قل ، يمكنك التقاط المحتوى في cfcontent
وتحقق من طولها في الشخصيات.
يرجى ملاحظة أن كلتا الطريقتين غير موثوقين عندما تعمل مع محتوى نص ، لأن تقديم الخطوط يمكن أن يكون مختلفًا حقًا للمستخدمين. لذلك ، يمكن أن يكون الاحتفاظ ببعض الارتفاع الإضافي مفيدًا.
هناك طريقة صعبة أخرى هي التحقق مما إذا كانت أشرطة التمرير موجودة ، للنافذة التي تم فتحها بالفعل. هناك سمة scrollHeight
الذي يمكنك مقارنته مع clientHeight
وزيادة الارتفاع. هذا يمكن أن ينتج عن بعض التأثيرات القبيحة "القفز" في بعض المتصفحات ، ولكن يجب أن تعمل.
كنت مهتمًا وحاولت اختبارًا سريعًا للطريقة الأخيرة. ولدت أولاً منبثقة مع ث/هـ = 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
صفات.
أتمنى أن يساعدك هذا.