загрузить iframe в bootstrap modal

Question

Я хочу загрузить iframe в bootstrap modal и показать загрузчик до загрузки iframe. Я использую просто функцию jquery click, но она не работает. Я не понимаю, почему он не работает. fiddle полная страница 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') 
}) 

Как показано выше, использование 'shown.bs.modal' событие, которое приходит в загрузчике 3.

EDIT: -

и просто попытаться открыть какой-нибудь другой URL из фрейма, кроме google.com, это не позволит вы можете открыть google.com из-за некоторых угроз безопасности.

Причина в том, что Google отправляет заголовок ответа «X-Frame-Options: SAMEORIGIN». Этот параметр запрещает браузеру отображать iFrames, которые не размещены в том же домене, что и родительская страница.

Answer 2

Bootstrap событие для модального нагрузки была изменена в Bootstrap 3

просто использовать shown.bs.modal событие:

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

Больше можно узнать на мероприятии в ссылке ниже:

http://getbootstrap.com/javascript/

Answer 3

кажется, что ваш

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

Вы можете сделать это в небольшой другому, как этот

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

Вы можете просто использовать this bootstrap helper to dialogs(только 5 кбайт)

он поддерживает поддержку ajax-запроса, iframe, общих диалогов, подтверждения и подсказки!

вы можете использовать его как:

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

это обеспечивает прогресс загрузки при загрузке IFRAME!

Не требуется html.

Вы можете использовать объектный литерал как параметр для дополнительных параметров.

Проверьте форму сайта более подробно.

лучше,

Answer 5

я наткнулся на эту implementation в Codepen. Надеюсь, вы сочтете это полезным.

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