تغيير حجم Iframe ديناميكيًا

Question

أستطيع أن أرى أن هذا السؤال قد تم طرحه عدة مرات، ولكن لا يبدو أن أيًا من الحلول المقترحة يعمل مع الموقع الذي أقوم بإنشائه، لذلك أقوم بإعادة فتح الموضوع.أحاول تحديد حجم إطار iframe بناءً على ارتفاع محتواه.توجد كل من الصفحة التي تحتوي على iframe وصفحة المصدر الخاصة بها في نفس المجال.

لقد قمت بتجربة الحلول المقترحة في كل من المواضيع التالية:

• قم بتغيير حجم ارتفاع iframe وفقًا لارتفاع المحتوى الموجود فيه
• تغيير حجم iframe بناءً على المحتوى

أعتقد أن الحلول المذكورة أعلاه لا تعمل لأنه عند الإشارة إلى body.clientHeight، لم يحدد المتصفح ارتفاع المستند فعليًا.

هذا هو الكود الذي أستخدمه:

    var ifmBlue = document.getElementById("ifmBlue");
    ifmBlue.onload = resizeIframe;

    function resizeIframe()
    {
        var ifmBlue = document.getElementById("ifmBluePill");
        var ifmDiv = ifmBlue.contentDocument.getElementById("main");
        var height = ifmDiv.clientHeight;
        ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height ||  500) + 5 + 'px';
    }

إذا قمت بتصحيح البرنامج النصي باستخدام تصحيح الأخطاء، فإن ارتفاع العميل لقسم div الرئيسي لـ iframe.contentDocument هو 0.بالإضافة إلى ذلك، فإن قيمة body.offsetHieght وbody.scrollHeight هي 0.ومع ذلك، بعد الانتهاء من تشغيل البرنامج النصي، إذا قمت بفحص DOM لعنصر HTML iframe (باستخدام تصحيح الأخطاء النارية)، يمكنني أن أرى أن ClientHeight للجسم هو 456 وأن ClientHeight الخاص بالقسم الداخلي هو 742.يقودني هذا إلى الاعتقاد بأن هذه القيم لم يتم تعيينها بعد عند تشغيل iframe.onload.لذلك، في أحد المواضيع أعلاه، قمت بنقل الكود إلى معالج الأحداث body.onload الخاص بالصفحة المصدر لإطار iframe.هذا الحل أيضا لم ينجح.

أي مساعدة يمكنك تقديمها هي محل تقدير كبير.

شكرًا،

سي جيه

Answer 1

يحتوي DynamicDrive على مثل هذا البرنامج النصي, ، والذي أعتقد أنه يفي بما تطلبه.

هناك أيضا إصدار أحدث الآن.

---

تحديث 2011:

أود بقوة نوصي باستخدام AJAX على شيء مثل هذا، لا سيما بالنظر إلى أن iframe الذي يتم تغيير حجمه ديناميكيًا يعمل فقط عبر نفس النطاق.

ومع ذلك، فهو غير واضح بعض الشيء، لذا إذا كان عليك استخدام AJAX بدلاً من التحميل القياسي للصفحة، فأنت حقًا، حقًا يجب استخدام أشياء مثل history.pushState (ويتم تحميل الصفحة القياسية كبديل للمتصفحات التي لا تدعمها).يوجد مكون إضافي لـ jQuery يعالج هذه الأشياء نيابةً عنك، مكتوب بواسطة GitHubber، يسمى pjax, ، التي يستخدمونها فقط للملاحة الريبو.

Answer 2

قمت بنقل المعالج؟ربما يجب عليك نقل الوظيفة إلى الإطار الداخلي أيضًا، بحيث عند الحصول على قيم الارتفاع، فإنك تشير إلى الجسم مباشرةً بدلاً من كائن الإطار...ثم قم باستدعاء دالة الارتفاعparent.set

خدعة أخرى، قم باستدعاء الوظيفة بعد انتهاء مهلة قدرها 10 مللي ثانية

أتذكر أنني واجهت هذه المشكلة مرة واحدة ولكني استخدمت getBoundingClientRect() الخاص بـ IE للحصول على ارتفاع المحتوى، وراجع مركز مطوري mozilla بحثًا عن شيء مماثل، وهذا مجرد تلميح، ولم أبحث عنه

ومن ناحية أخرى، ما هو ifmBluePill؟هل هو iframe؟أو شعبة داخل منه؟لماذا تشير إلى "contentDocument" لقسم؟

Answer 3

بالمناسبة، قام DynamicDrive بتحسين البرنامج النصي الخاص به لتغيير حجمه دائمًا حتى إذا تغيرت محتويات iframe: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

من صفحتهم:

هذا هو الإصدار II من البرنامج النصي SSI الأصلي IFRAME ، والذي يتيح لك مثل البرنامج النصي الأصلي عرض محتوى خارجي بسلاسة على صفحتك عبر iframe.يقوم بذلك عن طريق تغيير حجم iframe ديناميكيًا ليكون ارتفاع الصفحة الواردة فيه ، مما يلغي أي أشرطة التمرير الممكنة من الظهور أثناء عرض المحتوى الخارجي بأكمله.فكر في الأمر على أنه SSI (يتضمن جانب الخادم) المحاكاة باستخدام DHTML!يعمل هذا البرنامج النصي في كل من IE5+ و NS6+ ، وبالنسبة للمتصفحات الأخرى ، يدعم الخيار إما لإخفاء IFRame تمامًا في السؤال أو عرضه باستخدام الارتفاع الافتراضي.

الآن ، يختلف هذا البرنامج النصي عن الأصل من حيث أنه يمكنك تحميل مستندات إضافية* في iframe حتى بعد تحميل الصفحة ، وسيقوم IFRAME بضبط ارتفاعه ديناميكيًا لتناسب المستند الجديد.لذا استخدم هذا البرنامج النصي إذا كنت بحاجة إلى عرض محتوى خارجي فقط عبر علامة IFRAME ، ولكن تنوي تغيير هذا المحتوى بعد تحميل الصفحة.