Jquery 防止加载隐藏iframe的内容

我有许多隐藏的

标记，带有

（display:none）

，当我想加载jQuery模式时，我会调用这些标记。 每个

标记都包含一个调用不同页面的

---

为了不让我的页面加载缓慢，我想知道是否有办法阻止

加载页面，直到我在模式中调用

？

您可以在呈现html后加载iframe，方法是在iframe的html中提供空的src，然后通过jquery/javascript分配src

Html

如上所述，我们可以在iframe中添加数据属性来保存src，而不是硬编码

Html

您还可以在jquery中创建一个新框架并分配src，这将加载带有空白框架的页面

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

只需使用一个iframe：

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

然后jquery：

---

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

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

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

$('<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);

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

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

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