jquery - 防止加载隐藏 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中添加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);

Answer 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'));
});