阻止加载隐藏的iframe的内容

Question

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

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

Answer 1

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

HTML 的

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

Javascript，iframe可以加载某些操作，例如按钮点击

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

正如kern3l所述，我们可以在iframe中添加数据属性来保存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'); 

OR

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

Answer 2

只需使用一个iframe：

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

然后在assign src的{​​{1}}上each click：

假设这是html：

button/link

然后jquery：

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