javascript 100% की ऊंचाई के साथ पूर्ण स्क्रीन iframe




html css (11)

http://embedresponsively.com/

यह एक महान संसाधन है और मैंने बहुत अच्छा काम किया है, मैंने इसे इस्तेमाल करने के कुछ बार। निम्नलिखित कोड बनाता है ....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Israme ऊंचाई = 100% सभी ब्राउज़रों में समर्थित है?

मैं डॉक्ट टाइप का उपयोग कर रहा हूं:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

मेरे आईफ्रेम कोड में, अगर मैं कहता हूं:

<iframe src="xyz.pdf" width="100%" height="100%" />

मेरा मतलब है कि यह वास्तव में शेष पृष्ठ की ऊंचाई ले जाएगा (क्योंकि 50px की निश्चित ऊंचाई के साथ शीर्ष पर एक और फ्रेम है) क्या यह सभी प्रमुख ब्राउज़रों (आईई / फ़ायरफ़ॉक्स / सफारी) में समर्थित है?

स्क्रॉलबार के बारे में भी, भले ही मैं scrolling="no" कहूं, मैं फ़ायरफ़ॉक्स में अक्षम स्क्रॉलबार देख सकता हूं ... मैं स्क्रॉलबार को पूरी तरह से कैसे छिपा सकता हूं और आईफ्रेम ऊंचाई स्वचालित रूप से कैसे सेट करूं?


अक्षित सूता के जवाब के अतिरिक्त: यह आयात है और प्रत्येक माता-पिता तत्व की ऊंचाई को स्पष्ट रूप से सेट करने के लिए, तालिका और कॉलम के यदि भी कोई है:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>

केवल यह मेरे लिए काम किया (लेकिन "समान डोमेन" के लिए):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

आप या तो उपयोग कर सकते हैं:

MakeIframeFullHeight(document.getElementById("iframe_id"));

या

<iframe .... onload="MakeIframeFullHeight(this);" ....

एक पूर्णस्क्रीन iframe बनाने के लिए 3 दृष्टिकोण:

  • दृष्टिकोण 2 - फिक्स्ड पोजीशनिंग

    यह दृष्टिकोण काफी सीधे आगे है। बस fixed तत्व की स्थिति निर्धारित करें और 100% की height / width जोड़ें।

    यहां उदाहरण

    iframe {
        position: fixed;
        background: #000;
        border: none;
        top: 0; right: 0;
        bottom: 0; left: 0;
        width: 100%;
        height: 100%;
    }
    <iframe></iframe>

  • दृष्टिकोण 3

    इस आखिरी विधि के लिए, बस body / html / iframe तत्वों की height 100%

    यहां उदाहरण

    html, body {
        height: 100%;
        margin: 0;         /* Reset default margin on the body element */
    }
    iframe {
        display: block;       /* iframes are inline by default */
        background: #000;
        border: none;         /* Reset default border */
        width: 100%;
        height: 100%;
    }
    <iframe></iframe>


आप पिछले उत्तर राज्यों के रूप में फ्रेमसेट का उपयोग कर सकते हैं, लेकिन यदि आप iFrames का उपयोग करने के लिए आग्रह करते हैं, तो 2 निम्नलिखित उदाहरणों को काम करना चाहिए:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

एक विकल्प:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

ऊपर दिखाए गए अनुसार 2 विकल्पों के साथ स्क्रॉलिंग छुपाने के लिए:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

दूसरे उदाहरण के साथ हैक:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

IFrame के स्क्रॉल-बार को छिपाने के लिए, अभिभावक overflow: hidden बना दिया जाता है overflow: hidden स्क्रॉलबार को छिपाने के लिए छुपाया जाता है और iFrame 150% चौड़ाई और ऊंचाई तक जाने के लिए बनाया जाता है जो पृष्ठ के बाहर स्क्रॉल-बार को मजबूर करता है और चूंकि शरीर के पास नहीं है स्क्रॉल-बार कोई भी आइफ्रेम पृष्ठ की सीमाओं से अधिक होने की अपेक्षा नहीं कर सकता है। यह आईफ्रेम के स्क्रॉलबार को पूरी चौड़ाई से छुपाता है!


body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>


आप पहले सीएसएस जोड़ें

html,body{
height:100%;
}

यह एचटीएमएल होगा:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>

मैं एक ही समस्या में भाग गया, मैं एक div में एक आईफ्रेम खींच रहा था। इसे इस्तेमाल करे:

<iframe src="http://.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

ऊंचाई 100vh पर सेट है जो व्यूपोर्ट ऊंचाई के लिए खड़ा है। इसके अलावा, चौड़ाई 100vw पर सेट की जा सकती है, हालांकि स्रोत फ़ाइल उत्तरदायी होने पर आप संभावित रूप से समस्याओं में भाग लेंगे (आपका फ्रेम बहुत व्यापक हो जाएगा)।


यह मेरे लिए बहुत अच्छी तरह से काम किया (केवल अगर iframe सामग्री एक ही डोमेन से आता है):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>

द्रव पूर्ण स्क्रीन iframe बनाने का एक और तरीका:

पेज लोड होने पर एंबेडेड वीडियो पूरे viewport क्षेत्र को भरता है

वीडियो या किसी भी एम्बेडेड सामग्री के साथ लैंडिंग पृष्ठों के लिए अच्छा दृष्टिकोण। आपके पास एम्बेडेड वीडियो के नीचे कोई अतिरिक्त सामग्री हो सकती है, जो पृष्ठ को स्क्रॉल करते समय प्रकट होता है।

उदाहरण:

सीएसएस और एचटीएमएल कोड।

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>


<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>







html-frames