carica iframe nel modal bootstrap

Question

Voglio caricare un iframe in un modal bootstrap e mostrare un caricatore prima che l'iframe sia caricato. Sto usando una semplice funzione click jquery, ma non funziona. Non capisco perché non funzioni. fiddle pagina intera fiddle

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

Answer 1

$('.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') 
}) 

Come mostrato sopra uso 'shown.bs.modal' evento che viene in bootstrap 3.

EDIT: -

e cercano solo di aprire qualche altro URL iframe diverso da google.com, non permetterà per aprire google.com a causa di alcune minacce alla sicurezza.

Il motivo è che Google sta inviando un'intestazione di risposta "X-Frame-Options: SAMEORIGIN". Questa opzione impedisce al browser di visualizzare iFrame che non sono ospitati nello stesso dominio della pagina padre.

Answer 2

evento Bootstrap per il carico modale è stato cambiato in Bootstrap 3

basta usare shown.bs.modal evento:

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

Maggiori informazioni possono trovato sull'evento al link qui sotto:

http://getbootstrap.com/javascript/

Answer 3

La tua

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

È possibile farlo in un lieve modo diverso, come questo

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

Answer 4

Si può semplicemente utilizzare this bootstrap helper to dialogs(solo 5 kB)

ha il supporto per una richiesta Ajax, iframe, dialoghi comuni, conferma e prompt!

è possibile utilizzarlo come:

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

questo fornire un avanzamento del caricamento durante il caricamento del iframe!

Nessun html richiesto.

È possibile utilizzare un oggetto letterale come parametro per opzioni extra.

Controlla il modulo del sito più dettagli.

migliore,

Answer 5

mi sono imbattuto in questo implementation in Codepen. Spero che lo trovi utile.

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