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




html css (9)

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" कहूं, मैं फ़ायरफ़ॉक्स में अक्षम स्क्रॉलबार देख सकता हूं ... मैं स्क्रॉलबार को पूरी तरह से कैसे छिपा सकता हूं और आईफ्रेम ऊंचाई स्वचालित रूप से कैसे सेट करूं?


<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></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>


1. अपने डॉक्टरेट को कम सख्त करने के लिए बदलें। एक्सएचटीएमएल का प्रयोग न करें; यह मूर्खता है। बस एचटीएमएल 5 डॉक्टरेट का प्रयोग करें और आप अच्छे हैं:

<!doctype html>

2. आपको यह सुनिश्चित करने की आवश्यकता हो सकती है (ब्राउज़र पर निर्भर करता है) कि iframe के माता-पिता की ऊंचाई है। और उसके माता-पिता। और उसके माता-पिता। आदि:

html, body { height: 100%; }

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

<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);" ....

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

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

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


यहां एक संक्षिप्त कोड है। यह वर्तमान विंडो ऊंचाई खोजने के लिए एक jquery विधि पर निर्भर करता है। IFrame के लोड पर यह iframe की ऊंचाई वर्तमान विंडो के समान ही सेट करता है। फिर पृष्ठ के आकार को संभालने के लिए, बॉडी टैग में एक ऑन्रेसइज़ इवेंट हैंडलर होता है जो दस्तावेज़ का आकार बदलते समय आईफ्रेम की ऊंचाई सेट करता है।

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

यहां एक कामकाजी नमूना है: http://jsbin.com/soqeq/1/


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>

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-frames