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

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