こんにちはどーも僕です。
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の猫の手は飼ってる猫の手です。
