html - 如何卸载 iframe 直到显示

Question

我已经部署了许多 iframe 来显示和隐藏每个选项卡，

<div class="slide" data-slide="1">
       <iframe src="url" width="100%" height="100%"></iframe>
</div>
<div class="slide" data-slide="2">
       <iframe src="url" width="100%" height="100%"></iframe>
</div>
<div class="slide" data-slide="3">
       <iframe src="url" width="100%" height="100%"></iframe>
</div>

这就是它的代码的样子。虽然有些按钮没有显示。每个 iframe 都有匹配的按钮。每次单击每个按钮时，都会向用户显示匹配的 iframe。

假设我们有 100 个 iframe。

浏览器会加载这么多 iframe。然后，用户不得不花费很多时间。

所以我明确地想卸载 iframe 直到它被显示。

我怎样才能做到这一点？

Answer 1

您可以在按钮单击事件上动态更改 iframe 的“src”属性。

就像是：

<button data-url="http://google.com">Google</button>
<button data-url="http://yahoo.com">Yahoo!</button>
<button data-url="http://aol.com">Aol.</button>
<iframe id="myFrame" src="http://google.com" width="100%" height="100%"></iframe>

使用 jQuery：

$( "button" ).on( "click", function(){
     var _url = $( this ).data( "url" );
     $( "#myFrame" ).attr( "src", _url );
})

这样做，您只需要一个框架元素，而不是相当于没有按钮的框架。