防止加载隐藏 iframe 的内容答案

【问题标题】：Prevent loading the content of a hidden iframe防止加载隐藏 iframe 的内容
【发布时间】：2013-02-14 05:18:17
【问题描述】：

我有很多隐藏的<div> 标签，带有(display: none)，当我想加载一个jQuery 模式时我会调用这些标签。这些<div> 标签中的每一个都包含一个<iframe>，它调用不同的页面。

为了不让我的页面加载缓慢而痛苦，我想知道是否有办法阻止<iframe>加载页面，直到我在模态中调用<div>？

【问题讨论】：

标签： jquery iframe load modal-dialog hidden

【解决方案1】：

您可以通过在 iframe 的 html 中提供空 src 并稍后通过 jquery / javascript 分配 src 来加载 html 呈现后的 iframe。

HTML

<iframe id="iframe1" ></iframe>

Javascript，iframe 可以在按钮点击等动作上加载

document.getElementById('iframe1').src="/default.aspx";

正如kern3l所说，我们可以在iframe中添加data属性来保存src而不是硬编码。

HTML

<iframe id="iframe1" data-frameSrc="/default.aspx"></iframe>

Javascript

ifrmame1 = $('#iframe1')
ifrmam1.src = ifrmam1.data("frameSrc");

你也可以在 jquery 中新建一个框架并分配 src，这将加载空白框架的页面。

$('<iframe>', {
   src: '/default.aspx',
   id:  'myFrame',
   frameborder: 0,
   scrolling: 'no'
   }).appendTo('#parentDivId');

或

var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="300px";
iframe.height="250px";
iframe.id="myFrame";
iframe.setAttribute("src", '/default.aspx');
document.getElementById("parentDivId").appendChild(iframe);

【讨论】：

您可以通过将 src 存储在 data-src 属性中并在需要时从中读取来做得更好。然后你不要在你的 javascript 中存储数据（这更好）。
这个方案在网上被提及很多，但是流量很大。如果您不设置 src 浏览器会将其设置为“about:blank”。当您稍后显示您的模态并设置另一个 src 时，它将加载并且一切都会好起来，直到您的用户在浏览器中按下返回按钮，这会将您仍然显示的模态 iframe 返回到“about:blank”。最好的选择是动态创建整个 iframe 元素。

【解决方案2】：

只需使用一个 iframe：

<iframe id='page' src=''></iframe>

然后assign src 上的each click button/link：

假设这是 html:

<ul>
  <li><a href='myfolder/myPage1.html'>Page 1</a></li>
  <li><a href='myfolder/myPage2.html'>Page 2</a></li>
</ul>

然后是jquery：

$('ul li a').click(function(e){
   e.preventDefault();
   $('#page').attr('src', $(this).attr('href'));
});

【讨论】：