Iframe pe tot ecranul cu o înălțime de 100%. (Programare, Javascript, Html, Css, Iframe, Cadre Html)

testndtv a intrebat.

Este iframe height=100% acceptat în toate browserele?

Folosesc doctype as:

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

În codul meu iframe, dacă spun:

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

Vreau să spun că va lua de fapt înălțimea paginii rămase (deoarece există un alt cadru deasupra cu înălțimea fixă de 50px)Este acest lucru suportat în toate browserele majore (IE/Firefox/Safari) ?

De asemenea, în ceea ce privește scrollbars, chiar dacă eu spun scrolling="no", , pot vedea bare de defilare dezactivate în Firefox…Cum pot ascunde complet barele de defilare și să setez automat înălțimea iframe-ului?

Comentarii

    16

  • Vedeți de fapt nu am toate browserele instalate..De asemenea versiuni diferite..de asemenea am vrut doar să mă asigur că este un fel de standard.. –  > Por testndtv.
  • Ai putea să încerci și într-un validator css. –  > Por Ruben.
  • Da, asta nu dă nici o eroare/avertisment…Dar întrebarea mea este dacă toate browserele aplică de fapt 100% înălțime? –  > Por testndtv.
  • Pentru mine, acest răspuns a funcționat bine: stackoverflow.com/questions/5272519/… –  > Por Zied Hamdi.
18 răspunsuri
Axe

Ați putea folosi frameset așa cum spune răspunsul anterior, dar dacă insistați să folosiți iFrames, cele 2 exemple următoare ar trebui să funcționeze:

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

O alternativă:

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

Pentru a ascunde defilarea cu 2 alternative, așa cum se arată mai sus:

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

Hack cu al doilea exemplu:

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

Pentru a ascunde barele de defilare ale iFrame-ului, părintele se face overflow: hidden să ascundă barele de defilare, iar iFrame-ul este făcut să ajungă până la 150% lățime și înălțime, ceea ce forțează barele de defilare în afara paginii și, din moment ce corpul nu are bare de defilare, nu se poate aștepta ca iframe-ul să depășească limitele paginii. Acest lucru ascunde barele de defilare ale iFrame-ului cu lățime completă!

Comentarii

  • Sună bine…Doar o întrebare totuși…De ce trebuie să folosim style=”height:100%;width:100%;” când oricum spunem iframe height=”100%” width=”100%” –  > Por testndtv.
  • De asemenea, doar IE nu ia 100% din înălțime (ia în jur de 200px ht)…FF și Safri iau toată înălțimea rămasă… – –  > Por testndtv.
  • @Boris Zbarsky Da, mulțumesc că m-ai anunțat! Am actualizat postarea acum!!! @hmthr Prima ta întrebare legată de tag-urile duble se datorează faptului că browserele anterioare iau tag-urile „height” și „width”, dar nu funcționează bine cu tag-urile de stil! În legătură cu bug-ul IE, aș prefera să rămâi la primul cod pentru acest caz. –  > Por Axe.
  • Tocmai am făcut o modificare la al doilea cod care pare să rezolve problema celor 200px în IE. Vedeam un decalaj în partea dreaptă. Acum este clar! –  > Por Axe.
  • 15

  • Pentru ca iframe-ul să folosească corect 100%, părintele trebuie să fie 100%. În doctrinele mai noi, tag-ul html și body nu sunt automat 100%. Când am adăugat height:100% pentru html și body atunci a funcționat impecabil. Așadar, răspunsul corect la întrebare cred că este cel de la rudie, cu excepția faptului că a trebuit să păstrez doctype-ul xhtml. De asemenea, rețineți că regulile overflow nu sunt atunci necesare. Barele de defilare funcționează atunci așa cum este prevăzut – automat. –  > Por Spiralis.
Josh Crozier

3 abordări pentru crearea unui ecran complet iframe:



  • Abordarea 2 – Poziționare fixă

    Această abordare este destul de simplă. Trebuie doar să setați poziționarea elementului fixed și adăugați un element height/width de pe 100%.

    Exemplu aici


  • Abordarea 3

    Pentru această ultimă metodă, trebuie doar să setați height de la body/html/iframe la 100%.

    Exemplu aici

Comentarii

  • Am ajuns să folosesc o variantă a opțiunii 1… Am folosit width:100% și height:100vh pentru că sursa pe care am extras-o era destul de largă, iar iframe-ul este conținut într-un div. O soluție excelentă. Vă mulțumim. –  > Por NotJay.
  • adăugând display: block a rezolvat problema pentru a preveni apariția unei bare de derulare duble –  > Por KavenG.
Rudie

1. Schimbați DOCTYPE-ul cu ceva mai puțin strict. 2. Nu folosiți XHTML; este o prostie. Folosește doar doctype HTML 5 și ești în regulă:

<!doctype html>

2. S-ar putea să trebuiască să vă asigurați (depinde de browser) că părintele iframe-ului are o înălțime. Și părintele său. Și părintele său. Etc:

html, body { height: 100%; }

Comentarii

  • Partea importantă aici pentru mine a fost că tag-ul html și body avea nevoie de height:100%. Mulțumesc. –  > Por Spiralis.
  • Setarea doar body funcționează în Chrome, dar nu și în alte browsere. –  > Por Dingle.
  • Iată 2 abordări alternative. –  > Por Josh Crozier.
NotJay

M-am lovit de aceeași problemă, trăgeam un iframe într-un div. Încearcă asta:

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

Înălțimea este setată la 100vh, care reprezintă înălțimea viewport. De asemenea, lățimea ar putea fi setată la 100vw, deși probabil că veți întâmpina probleme dacă fișierul sursă este responsiv (cadrul dvs. va deveni foarte larg).

Comentarii

  • seamless nu este suportat în niciun browser din câte știu eu –  > Por VisualBean.
  • După ce am petrecut mai mult timp decât aș vrea să recunosc în jurul valorii de fidgeting cu această problemă, acest lucru este EXACT ceea ce aveam nevoie. Cu excepția faptului că în loc de un site web am folosit un alt fișier HTML, care a necesitat o ajustare minoră a înălțimii de vizualizare și acum este gata de utilizare. Vă mulțumesc! –  > Por Thomas Jacobs.
Ivan

Acest lucru a funcționat foarte bine pentru mine (numai dacă conținutul iframe provine de la același domeniu):

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

Comentarii

    23

  • Acest lucru va funcționa numai dacă iframe src se află pe același domeniu ca și pagina părinte, altfel veți primi o eroare de permisiune refuzată pe contentWindow.document. –  > Por wolfyuk.
  • A durat puțin pentru a face acest lucru să funcționeze în interiorul WordPress, am adăugat doar un shortcode în plugin-ul meu. FUNCȚIONEAZĂ CA UN FARMEC. –  > Por Andy.
  • Funcționează. dar problema este că nu va fi recalculată înălțimea la fiecare postback al iframe-ului interior. Există vreo soluție de rezolvare ? –  > Por Behrouz.M.
khoa

Heitor Giacomini

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

Uma Shankar Goel

Următoarele au fost testate și funcționează

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>

Comentarii

  • Mai sunt 14 răspunsuri deja aici. Puteți explica în ce fel răspunsul dvs. este mai bun sau cel puțin diferit de celelalte 14? –  > Por Stephen Rauch.
  • Am încercat acest lucru și au apărut niște rezultate foarte interesante. Cadrul părinte și iFrame au fost unite împreună! –  > Por Adam F.
blueDexter
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

Brabbeldas

Suplimentar la răspunsul lui Akshit Soota:este importantși să setați în mod explicit înălțimea fiecărui element părinte, de asemenea a tabelului și a coloană dacă există:

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

Tariq Javed

Mai întâi adăugați css

html,body{
height:100%;
}

Acesta va fi html-ul:

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

BraveNewMath

Iată un cod concis. Acesta se bazează pe o metodă jquery pentru a găsi înălțimea curentă a ferestrei. La încărcarea iFrame-ului, setează înălțimea iframe-ului să fie aceeași cu cea a ferestrei curente. Apoi, pentru a gestiona redimensionarea paginii, tag-ul body are un gestionar de evenimente onresize care stabilește înălțimea iframe-ului ori de câte ori documentul este redimensionat.

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

Iată un exemplu funcțional: http://jsbin.com/soqeq/1/

D.A.H

O altă modalitate de a construi un ecran complet fluid iframe:


Video încorporat umple întregul viewport zona când se încarcă pagina

O abordare frumoasă pentru landing pages cu video sau orice conținut încorporat. Puteți avea orice conținut suplimentar sub videoclipul încorporat, care este dezvăluit atunci când derulați pagina în jos.

Exemplu:

CSS și cod HTML.

Comentarii

  • Vă rugăm să rețineți că este posibil să aveți nevoie de ceva javascript pentru Firefox. Există o problemă comună cu înălțimea iframe-ului în Firefox. –  > Por D.A.H..
Tom Witherington

http://embedresponsively.com/

Aceasta este o resursă excelentă și a funcționat foarte bine, de puținele ori când am folosit-o. Creează următorul cod….

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

T.Todua

Doar acest lucru a funcționat pentru mine (dar pentru „same-domain”):

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)
    })();
}

puteți folosi fie:

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

fie

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

Agnel Vishal

După cum urmează https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe, , valorile procentuale nu mai sunt permise. Dar următoarele au funcționat pentru mine

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Deși width:100% funcționează, height:100% nu funcționează. Deci window.innerHeight a fost folosit. De asemenea, puteți utiliza pixelii css pentru înălțime.

Codul de lucru: Link Site de lucru:Link

Tejpal Sharma

Puteți apela o funcție care va calcula înălțimea corpului iframe-ului atunci când iframe-ul este încărcat:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>

Jiren

Pentru a obține un iframe cu ecran complet fără o bară de defilare în interiorul iframe, utilizați următorul css. Nu este necesar nimic mai mult

iframe{
            height: 100vh;
            width: 100vw
        }
    
    iframe::-webkit-scrollbar {
        display: none;
    }