在bootstrap模式中加载iframe

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

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

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

编辑： –

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

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

Answer 2

在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/

Answer 3

你可以简单地使用这个bootstrap助手来对话 （只有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 4

我在Codepen中遇到了这个实现 。 我希望你觉得这对你有帮助。

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

Answer 5

看来你的

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