在bootstrap模式中加载iframe [英] load iframe in bootstrap modal

问题描述

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

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

推荐答案

$('.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引导程序3中的.modal'事件。

编辑： -

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

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.

也就是说，谷歌正在发送一个X-Frame-Options：SAMEORIGIN响应头。此选项可防止浏览器显示与父页面不在同一域中的iFrame。

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.

这篇关于在bootstrap模式中加载iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！