在引导模式下加载iframe

Question

我想将iframe加载到引导模式中并在加载iframe之前显示加载器。我正在使用简单的jquery点击功能，但它不起作用。我不明白为什么它不起作用。 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

编辑： -

，只是尝试从而非google.com iframe中打开某些其他URL，它不会允许您由于某些安全威胁而打开google.com。

原因是Google正在发送“X-Frame-Options：SAMEORIGIN”响应标题。此选项可防止浏览器显示与父页面不在同一域中的iFrame。

Answer 2

模态负载引导事件引导改为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 KB）

它支持ajax请求，iframes，常用对话框，确认并提示！

，你可以使用它作为：

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", ""); 
    });