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

问题描述

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

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

如上所示，使用引导程序 3 中的 'shown.bs.modal' 事件.

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

-

然后尝试从 iframe 中打开 google.com 以外的其他网址，由于某些安全威胁，它不会让您打开 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.

这样做的原因是，Google 正在发送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.

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