在引导模式中加载 iframe答案

【问题标题】：load iframe in bootstrap modal在引导模式中加载 iframe
【发布时间】：2014-10-23 07:32:39
【问题描述】：

我想将 iframe 加载到引导模式并在加载 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();
    });
})

【问题讨论】：

标签： javascript jquery twitter-bootstrap iframe

【解决方案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')
})

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

编辑：-

然后尝试从 iframe 中打开 google.com 以外的其他 url，由于某些安全威胁，它不会允许您打开 google.com。

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

【讨论】：

【解决方案2】：

Bootstrap 3 中更改了模态负载的引导事件

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

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

更多活动详情请点击以下链接：

http://getbootstrap.com/javascript/

【讨论】：

感谢sanjeev的回答和解释

【解决方案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。

您可以使用对象字面量作为额外选项的参数。

查看网站表单了解更多详情。

最好的，

【讨论】：

【解决方案4】：

我在 Codepen 中遇到了这个 implementation。希望对您有所帮助。

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

【讨论】：

【解决方案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();
    });
})

【讨论】：

【解决方案6】：

我还想在模态窗口中加载任何 iframe。我所做的是，在 Modal 内部创建了一个 iframe，并将目标 iframe 的源传递给 modal 内部的 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>

【讨论】：