在引导模式中加载 iframe

Posted 2023-05-09

【中文标题】在引导模式中加载 iframe

【英文标题】：load iframe in bootstrap modal

【发布时间】：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();
    );
)

【参考方案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"   src="" name="iframe_modal"></iframe>
</div>