Leerraum von responsive iframe wird nicht entfernt mit jquery

Ich benutze Bootstrap reaktionsfähige Embed, um Iframe einzubetten. Wenn der Iframe jedoch leer ist (d. H. Wenn src eine leere Zeichenfolge ist), muss er ausgeblendet werden. Allerdings wird iframe zwar ausgeblendet, wenn keine Datei angezeigt wird, aber der weiße Bereich bleibt bestehen.Leerraum von responsive iframe wird nicht entfernt mit jquery

-Code-Schnipsel für reaktions-einbetten:

<div class="row" id="responsive-iframe"> 
    <div class="embed-responsive embed-responsive-16by9" id="iframe-embed"> 
     <iframe class="embed-responsive-item" src="" id="iframe" ></iframe> 
    </div> 
</div>

-Code-Snippet für das Verstecken es jquery mit:

<script> 
    $(function() { 
     $('#iframe').load(function() {    
      if($.trim($(this).contents().find("body").html()) == "") { 
      $('#responsive-iframe').css("display", "none"); 
      } 
     }); 
    }); 
</script>

Ich habe auch versucht iframe Display-Eigenschaft auf display: none; zu ändern, nach der Lektüre könnte es Arbeit, aber immer noch es scheitert.

Edit: Komplett Code- https://www.bootply.com/sahildhawan22/ygaJiHuKGg

Quelle

2017-05-21 sahil dhawan

Ich glaube nicht .load Ereignis auslösen, wenn Sie die src-Eigenschaft nicht

Quelle

2017-05-21 16:38:02 UXDart

So dann, wie dies erreicht werden könnte? –

den Code so lassen, wie du ihn jetzt hast ... aber da muss ein Ort sein, wo du den src einrichtest? an dieser Stelle mache ich ein '$ ('# responsive-iframe'). css (" display "," none ");' wenn es keine src gibt ... ist schwer, ohne den Rest des Codes zu sehen – UXDart

Ich mache eine Rekrutierungswebsite für mein College und was ich versuche zu tun ist, dass, wenn der Student keinen Lebenslauf hinzufügt, der 16 * 9 Platz versteckt wird. Ich hole die URL des Lebenslaufs von der Datenbank ab und der einzige Weg zu wissen, ob der Student den Lebenslauf hochgeladen hat, ist, zu wissen, ob src von iframe eine leere Zeichenfolge ist oder nicht. –

gesetzt, wenn der iframe leer ist (dh, wenn src ist leer String), es wird versteckt.

die einzige Möglichkeit, zu wissen, ob der Schüler den Lebenslauf hochgeladen hat, ist durch das Wissen, wenn src von iframe eine leere Zeichenfolge ist oder nicht

nicht in $.load() testen Sie. Sie können nur testen, ob src eine leere Zeichenfolge ist.

$(function() { 
 
    if($('#iframe').attr('src').trim() == '') { 
 
    $('#responsive-iframe').css("display", "none"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    asdf 
 
    </div> 
 
    <div class="row" id="responsive-iframe"> 
 
    <div class="embed-responsive embed-responsive-16by9" id="iframe-embed"> 
 
     <iframe class="embed-responsive-item" src="" id="iframe" ></iframe> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    bar 
 
    </div> 
 
</div>

Quelle

2017-05-21 16:42:01

Leerraum bleibt @MichaelCoker –

@sahildhawan bleibt es in meiner Demo? Ich sehe es nicht. –

Ja, Ihr Code funktioniert hier, aber wenn ich es in meinem mache, tut es das nicht. Soll ich den ganzen Code teilen? @michelcoker –

Leerraum von responsive iframe wird nicht entfernt mit jquery

Antwort

Verwandte Themen