2019.12.24

iframeを複数設置おすすめの方法

  • 技術情報
iframeを複数設置おすすめの方法

 

こんにちはどーも僕です。

 

iframeを同じページに複数設置すると激おもで、困ったなーなんてことありますよね。

すでに解決方法調べたら、いろいろあるかと思いますが、一応書いときます。

 

モーダルやボタンをクリックして、iframeを表示の場合はjsを使用します。

htmlにはクリックする要素にdata属性を付けます、

今回はdata-srcを付けました。

html

<div class="クリックする要素" data-src="iframeのsrcを記入"></div>
<iframe src="デフォルトにしたいsrc"></iframe>

 
 
js

$('クリックする要素').click(function(){
src = $(this).data('src');
$('iframe').attr('src',src );
});

 

作ってみました。

チェンジ
戻す

こんな感じになります。

他にもいろいろ考えたのは、
スクロールで画面内なのか外なのか判定して、
読み込みとかもありかもしれないですね。

これはまた別のお話で書きたいと思います。

ちなみに今回gifの猫の手は飼ってる猫の手です。

 

やっぱり猫ってサイコーだな!!