it-swarm.com.de

laden Sie den iframe im Bootstrap-Modal

Ich möchte einen Iframe in ein Bootstrap-Modal laden und einen Loader anzeigen, bevor der Iframe geladen wird. Ich verwende eine einfache Jquery-Klickfunktion, die jedoch nicht funktioniert. Ich verstehe nicht, warum es nicht funktioniert. Geige ganze Seite Geige

$('.btn').click(function() {
    $('.modal').on('show',function() {    
        $(this).find('iframe').attr('src','http://www.google.com')
    })
    $('.modal').modal({show:true})
    $('iframe').load(function() {
        $('.loading').hide();
    });
})
12
Carlos
$('.modal').on('shown.bs.modal',function(){      //correct here use 'shown.bs.modal' event which comes in bootstrap3
  $(this).find('iframe').attr('src','http://www.google.com')
})

Wie oben gezeigt, verwenden Sie das 'shown.bs.modal' -Ereignis, das in Bootstrap 3 enthalten ist.

BEARBEITEN: -

und versuchen Sie einfach, eine andere URL aus einem anderen iframe als google.com zu öffnen. Dadurch können Sie google.com aufgrund von Sicherheitsbedrohungen nicht öffnen.

Der Grund dafür ist, dass Google einen Antwortheader "X-Frame-Options: SAMEORIGIN" sendet. Diese Option verhindert, dass der Browser iFrames anzeigt, die nicht in derselben Domäne wie die übergeordnete Seite gehostet werden.

21

Das Bootstrap-Ereignis für das modale Laden wurde in Bootstrap 3 geändert

benutze einfach shown.bs.modal event:

$('.modal').on('shown.bs.modal', function() {
    $(this).find('iframe').attr('src','http://www.google.com')
})  

Mehr finden Sie auf der Veranstaltung unter dem folgenden Link:

http://getbootstrap.com/javascript/

4
sanjeev

Sie können einfach diesen Bootstrap-Helfer für Dialoge verwenden(nur 5 kB)

es unterstützt ajax request, iframes, allgemeine Dialoge, Confirm und Prompt!

sie können es verwenden als:

eModal.iframe('http://someUrl.com', 'This is a tile for iframe', callbackIfNeeded);

eModal.alert('The message', 'This title');

eModal.ajax('/mypage.html', 'This is a ajax', callbackIfNeeded);

eModal.confirm('the question', 'The title', theMandatoryCallback);

eModal.Prompt('Form question', 'This is a ajax', theMandatoryCallback);

dadurch wird beim Laden des iframe ein Ladevorgang gewährleistet!

Keine HTML erforderlich.

Sie können ein Objektliteral als Parameter für zusätzliche Optionen verwenden.

Überprüfen Sie das Site-Formular mehr Details.

beste,

3
Samuel Pinto

Ich bin auf diese Implementierung in Codepen gestoßen. Ich hoffe du findest es hilfreich.

this.on('hidden.bs.modal', function(){
      $(this).find('iframe').html("").attr("src", "");
    });
1
prafi

Ich wollte auch jeden iframe innerhalb des modalen Fensters laden. Ich habe einen Iframe in Modal erstellt und die Quelle des Ziel-Iframes an den Iframe im Modal übergeben.

function closeModal() {
  $('#modalwindow').hide();
  var modalWindow = document.getElementById('iframeModalWindow');
  modalWindow.src = "";
}
.modal {
  z-index: 3;
  display: none;
  padding-top: 5%;
  padding-left: 5%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(51, 34, 34);
  background-color: rgba(0, 0, 0, 0.4)
}
<!-- Modal Window -->
<div id="modalwindow" class="modal">
  <div class="modal-header">
    <button type="button" style="margin-left:80%" class="close" onclick=closeModal()>&times;</button>
  </div>
  <iframe id="iframeModalWindow" height="80%" width="80%" src="" name="iframe_modal"></iframe>
</div>
0
Gokul

Es scheint, dass dein

$(".modal").on('shown.bs.modal')   // One way Or

Sie können dies auf eine andere Art und Weise tun 

$('.btn').click(function(){
    // Send the src on click of button to the iframe. Which will make it load.
    $(".openifrmahere").find('iframe').attr("src","http://www.hf-dev.info");
    $('.modal').modal({show:true});
    // Hide the loading message
    $(".openifrmahere").find('iframe').load(function() {
        $('.loading').hide();
    });
})
0
Yunus Aslam