web-dev-qa-db-fra.com

charger iframe en mode bootstrap

Je veux charger un iframe dans un modal d'amorçage et afficher un chargeur avant le chargement de l'iframe. J'utilise une fonction de clic simple jQuery, mais cela ne fonctionne pas. Je ne comprends pas pourquoi cela ne fonctionne pas. violon page entière violon

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

Comme indiqué ci-dessus, utilisez l'événement 'shown.bs.modal' fourni avec bootstrap 3.

MODIFIER :-

et essayez simplement d'ouvrir une autre URL d'iframe autre que google.com, cela ne vous permettra pas d'ouvrir google.com à cause de certaines menaces de sécurité.

La raison en est que Google envoie un en-tête de réponse "X-Frame-Options: SAMEORIGIN". Cette option empêche le navigateur d’afficher des images iFrames qui ne sont pas hébergées sur le même domaine que la page parent.

21
Kartikeya Khosla

L'événement Bootstrap pour le chargement modal a été modifié dans Bootstrap 3

il suffit d'utiliser l'événement shown.bs.modal:

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

Plus peut être trouvé sur l'événement au lien ci-dessous:

http://getbootstrap.com/javascript/

4
sanjeev

Vous pouvez simplement utiliser cet assistant d'amorçage pour les dialogues(seulement 5 ko)

il supporte les requêtes ajax, les iframes, les boîtes de dialogue communes, confirmer et Prompt!

vous pouvez l'utiliser comme:

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

ceci fournit une progression du chargement lors du chargement de l'iframe!

Aucun html requis.

Vous pouvez utiliser un littéral d'objet comme paramètre pour des options supplémentaires.

Vérifiez la forme du site plus de détails.

meilleur,

3
Samuel Pinto

Je suis tombé sur cette mise en œuvre à Codepen. J'espère que cela vous aidera.

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

Il semble que votre

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

Vous pouvez le faire d'une manière légèrement différente, comme celle-ci 

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