كيف يتم تغيير حجم Diggbar بشكل حيوي من ارتفاع IFRAME الخاص به بناء على المحتوى وليس على نطاقهم؟

StackOverflow https://stackoverflow.com/questions/754519

  •  09-09-2019
  •  | 
  •  

سؤال

شخص ما طلب بالفعل، كيف يعمل Diggbar؟ في سؤال سابق.

بينما قدم شخص ما إجابة لائقة أنه لم يتناول شيئا واحدا:

كيف يتم تغيير حجم Digg بشكل ديناميكي ارتفاع IFRAME الخاص بهم، بناء على محتوى موقع عبر مجال مختلف؟

هناك الكثير من الأسئلة والأجوبة هنا من أجل ضبط ارتفاع IFRAMES REPT ديناميكيا بشكل حيوي (باستخدام JavaScript) طالما أن عنوان URL مؤطر على نطاقك الخاص. ومع ذلك، يبدو أن Digg قد حل هذه المشكلة مع مواقع الويب لأي مجال.

هل هناك أي مبرمجي الويب لديهم أي فكرة عن كيفية إنجاز ذلك؟

ملاحظة: لا يتم ضبط iFrame ببساطة على ارتفاع 100٪. العلامة iframe ببساطة لا تعمل هكذا. جوجل "100٪ ارتفاع IFRAME" وسترى ما أقصده.

هل كانت مفيدة؟

المحلول

إذا نظرت في CSS, ، هم يستخدمون height: 100% ل iframe:

iframe#diggiFrame {
    color: #666;
    width: 100%;
    height: 100%;
    z-index: 10;
    -webkit-box-sizing: border-box;    
}

أنها تضع diggbar فوق ذلك مع ارتفاع 46px, ، لذلك iframe يستغرق 100٪ من المساحة المتبقية. هم يستخدمون overflow: hidden على ال body عنصر للحفاظ على iframe بالكامل داخل الارتفاع الرأسي للصفحة، بدلا من السماح للصفحة بالتمرير. هذا يعني أن شريط التمرير سوف يظهر بعد ذلك داخل iframe, ، بدلا من الصفحة بأكملها. لاحظ أن الطريقة التي يعمل بها diggbar يعمل فقط في وضع Quirks في Firefox؛ انظر أدناه لكيفية القيام بذلك في وضع المعايير.

body {
    padding: 46px 0 0 0;
    margin: 0;
    background: #fff;
    overflow: hidden; 
    color: #333;
    text-align: left;
}

#t {
    width: 100%;
    min-width: 950px;
    height: 46px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* overflow: hidden; */
    border-bottom: 1px solid #666;
    background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
    line-height: 1;
}

تعديل: لأولئك الذين لا يصدقونني، ها هو مثال صغير. وبعد للحصول عليه لملء المساحة بأكملها، تحتاج إلى تعيينه ليس له حدود، وتحتاج <body> ليس لها هوامش.

تحرير 2.: آه، آسف، أرى ما كنت تتحدث عنه. تحتاج إلى overflow: hidden على ال body علامة للحصول على شريط التمرير للعمل بالطريقة التي تريدها.

تحرير 3.: يبدو أنك يجب أن تكون في وضع Quirks لهذا العمل في Firefox؛ إذا قمت بتضمين <!DOCTYPE html> الإعلان، الذي يضعك في وضع المعايير، و iframe يخرج صغير جدا.

تحرير 4.: آه، يمكنك أن تفعل ذلك في وضع المعايير في فايرفوكس كذلك. حصلت على الجواب هنا. وبعد تحتاج إلى ضبط الارتفاع على <html> و <body> عناصر إلى 100% كذلك. (نلاحظ أن <!DOCTYPE html> هو doctype ل أتش تي أم أل 5., وهو عمل قيد التقدم؛ ومع ذلك، فإنه يعمل على جميع المتصفحات الحديثة لتحويل وضع المعايير).

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="all">
    html, body {
      height: 100%
    }
    body {
      margin: 0;
      overflow: hidden;
    }
    #topbar {
      height: 50px;
      width: 100%;
      border-bottom: 1px solid #666
    }
    #iframe {
      height: 100%;
      width: 100%;
      border-width: 0
    }
  </style>
</head>
<body>
  <div id="topbar">
    <h1>This is my fake DiggBar</h1>
  </div>
  <iframe id="iframe" src="http://www.google.com/"></iframe>
</body>

نصائح أخرى

جزء من المشكلة مع HTML لا يمكنك فقط تعيين عنصر من أي شيء إلى ارتفاع بنسبة 100٪ ولديه تشغيل مساحة النافذة بأكملها. طريقة واحدة للقيام بذلك هي عن طريق جعل الجسم يحتوي على ارتفاع بكسل للنافذة وأي شيء داخل الجسم الذي تم تعيينه إلى 100٪ سيكون حجم النافذة.

أساسا فقط جعل جافا سكريبت العلاقات على حدث Windows Onresize ولديها تغيير حجم الجسم إلى حجم النافذة.

هنا مثال قمت به باستخدام JQuery

<script language="JavaScript" type="text/JavaScript">
    $(window).resize(function() {
        $('body').height(document.documentElement.clientHeight);
    });
</script>

مع هذا، ستتمكن من ضبط أي حالات أو عناصر أخرى ولديها تعمل في الارتفاع الكامل للنافذة.

يمكن أن يكون iframe ارتفاع 100٪ في وضع Quirks. يحقق Digg هذا من خلال ترك DocType.

IFRAME موجود على موقع Digg الإلكتروني باستخدام موقع الويب المستهدف داخل، وليس العكس. تم تعيين iFrame إلى عرض وارتفاع 100٪.

100٪ في IFRAME هي النسبة المئوية 100٪ من المساحة الأصل المعلنة. مثال هو:

/* parent element */

html, body {
   width: 100%;
   height: 100%;
}

/* child element */
iframe {
  width: 100%; /* this is truly 100%, try it out */
  height: 100%; /* try it out */
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top