جعل iframe يشغل مساحة رأسية

Question

أود أن أحصل على iframe يأخذ نفس القدر من المساحة الرأسية التي يحتاجها لعرض محتواه وعدم عرض شريط التمرير.هل هذا ممكن ؟

هل يوجد اى اعمال فى الجوار؟

Answer 1

هذا يجب أن يحدد IFRAME الارتفاع إلى ارتفاع محتواه:

<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>

قد ترغب في إضافة scrolling="no" لك IFRAME لإيقاف تشغيل أشرطة التمرير.

يحرر: عفوًا، نسيت أن أعلن the_height.

Answer 2

الحل البديل ليس للاستخدام <iframe> ورمز المعالجة المسبقة على جانب الخادم.

Answer 3

راجع هذا الموضوع أيضاً: كيف يقوم DiggBar بتغيير حجم ارتفاع iframe ديناميكيًا استنادًا إلى المحتوى وليس في مجاله؟.

إنه يتناول نفس السؤال.

Answer 4

يجب أن يقوم مقتطف CSS هذا بإزالة شريط التمرير العمودي:

body {
  overflow-x: hidden;
  overflow-y: hidden;
} 

لست متأكدًا بعد من إمكانية شغله للمساحة الرأسية التي يحتاجها، لكنني سأرى ما إذا كنت لا أستطيع اكتشاف ذلك.

Answer 5

إضافة أ DOCTYPE إعلان إلى IFRAME سيساعد المستند المصدر في حساب القيمة الصحيحة من السطر

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight

يرى W3C DOCTYPE للحصول على أمثلة

كنت أواجه مشكلات مع كل من IE وFF أثناء عرض ملف iframe المستند في وضع "المراوغات"، حتى أضفت ملف DOCTYPE.

دعم FF/IE/Chrome:لا يعمل .scrollHeight مع Chrome، لذا فقد توصلت إلى مثال جافا سكريبت باستخدام jQuery لتعيين الكل IFRAME الارتفاعات على الصفحة بناءً على محتوى إطارات iframe.ملحوظة:هذا مخصص للصفحات المرجعية ضمن نطاقك الحالي.

<script type="text/javascript">
    $(document).ready(function(){
        $('iframe').each(function(){
            var context = $(this);
            context.load(function(event){ // attach the onload event to the iframe  
                var body = $(this.contentWindow.document).find('body');
                if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
                    context.height($(body.get(0)).height() + 20);
                } else {
                    context.hide(); // hide iframes with no contents
                }
            });
        });
    });
</script>