load iframe in bootstrap modal

问题:

I want to load an iframe into a bootstrap modal and show a loader before the iframe is loaded. I am using a simple jquery click function, but it is not working. I do not understand why it is not working. fiddle full page 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();
    });
})

回答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')
})

As shown above use 'shown.bs.modal' event which comes in bootstrap 3.

EDIT :-

and just try to open some other url from iframe other than google.com ,it will not allow you to open google.com due to some security threats.

The reason for this is, that Google is sending an "X-Frame-Options: SAMEORIGIN" response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.

回答2:

Bootstrap event for modal load was changed in Bootstrap 3

just use shown.bs.modal event:

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

More can found on the event at the below link:

http://getbootstrap.com/javascript/

回答3:

You can simply use this bootstrap helper to dialogs (only 5 kB)

it has support for ajax request, iframes, common dialogs, confirm and prompt!

you can use it as:

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

this provide a loading progress while loading the iframe!

No html required.

You can use a object literal as parameter to extra options.

Check the site form more details.

best,

回答4:

I came across this implementation in Codepen. I hope you find it helpful.

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

回答5:

It seems that your

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

You can do this in a slight different way, like this

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