Question

我想将iframe加载到bootstrap模式中，并在加载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')
})

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

编辑： -

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

原因是，Google正在发送一个＆＃34; X-Frame-Options：SAMEORIGIN＆＃34;响应标题。此选项可防止浏览器显示未与父页面托管在同一域中的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

您只需使用this bootstrap helper to dialogs （仅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遇到了这个implementation。我希望你觉得它很有帮助。

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

Answer 6

我还想在模式窗口中加载所有iframe。我所做的是，在Modal内创建了一个iframe，并将目标iframe的源传递到该模态内的iframe。

function closeModal() {
  $('#modalwindow').hide();
  var modalWindow = document.getElementById('iframeModalWindow');
  modalWindow.src = "";
}

.modal {
  z-index: 3;
  display: none;
  padding-top: 5%;
  padding-left: 5%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(51, 34, 34);
  background-color: rgba(0, 0, 0, 0.4)
}

<!-- Modal Window -->
<div id="modalwindow" class="modal">
  <div class="modal-header">
    <button type="button" style="margin-left:80%" class="close" onclick=closeModal()>&times;</button>
  </div>
  <iframe id="iframeModalWindow" height="80%" width="80%" src="" name="iframe_modal"></iframe>
</div>

在bootstrap模式中加载iframe

6 个答案: