0

タブごとに表示・非表示をする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をアンロードしたいと思います。

どうやってやるの？

4

1 に答える 1

0

ボタン クリック イベントで 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 );
})

そうすることで、ボタンの数に相当するフレームではなく、単一のフレーム要素が必要になります。

于 2013-02-19T08:21:00.867 に答える