在bootstrap模式中加载iframe

Question

我想在ifst加载之前将iframe加载到bootstrap模式中并显示加载器.我正在使用一个简单的jquery点击功能,但它无法正常工作.我不明白为什么它不起作用.小提琴 整页小提琴

$('.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'bootstrap 3中的事件.

编辑: -

并且只是尝试从google以外的iframe打开其他网址,由于某些安全威胁,它将不允许您打开google.com.

原因是,Google正在发送"X-Frame-Options:SAMEORIGIN"响应标头.此选项可防止浏览器显示未与父页面位于同一域中的iFrame.

Answer 2

您可以简单地使用这个引导程序助手来进行对话框 （仅 5 kB）

它支持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 3

Bootstrap 3 中更改了模态加载的 Bootstrap 事件

只需使用shown.bs.modal事件：

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

有关该活动的更多信息，请访问以下链接：

http://getbootstrap.com/javascript/