jQueryだけでiframeを再読み込み(reload)させる方法とプレーンなjavascriptを使った方法
コードのサンプルとかをつくって表示する時に
そのページのCSSやjavascriptに影響を受けること無く
実行できるのがiframeで、素直にDEMOを表示できるので便利なんですが
アニメーションが伴うものや
ランダムな要素があるもので、何度か確認したいものがあります
そんな時にはiframe内を再読み込みさせてやりたい
それを解決する方法
iframe を再読み込みする方法
まず、jQueryで再読み込みする方法ですが
jQuery自体には、そういったものがありません
javascript で reload させることが出来ます
しかし、いろいろ試行錯誤した結果
jQueryだけでも、再読み込みをさせることに成功しました
一応方法としては3つの方法になります
- その1 javascript だけで行う方法
- その2 jQuery+javascript で行う方法
- その3 jQueryだけで reload を使わずに行う方法
その1 javascript だけで行う方法
document.getElementById('iframe')[0].contentDocument.location.reload(true);
こちらがjavascriptだけで行うコード
‘iframe’ ここに対象のIDを指定してやることで 再読み込み出来ます
問題点は IDでしか指定出来ない点
Class や 他の要素からたどって指定する方法が使えないので いろいろな条件や変動的な動作に弱い
その2 jQuery+javascript で行う方法
$('.iframe')[0].contentDocument.location.reload(true)
こちらはjQueryと組み合わせたもので
その1のjavascriptだけで動かすものよりも
セレクタの指定がjQueryになるので幅広く柔軟に指定出来るようになっています
これでいいのではないかと言うと
これにも弱点が、クロスドメインの場合には 再読み込みがどうやら出来ない模様
同一のドメインからのiframeならこの方法で再読み込みも出来、セレクタも柔軟なのでこれだけでも問題無いです
その3 jQuery だけで、reloadを使わずに行う方法
javascript の reload を使った方法ではクロスドメインの問題があるので
それを回避するために、全然違った方向からアプローチします
iframeタグ の src を書き換えることで、もう一度読み込ませる方法です
- すでにある src を変数に入れる(URLを控える)
- iframe の src を一度空にする
- iframe に src に控えておいたURLを入れる
var src = $(".iframe").attr("src");
$(".iframe").attr("src","");
$(".iframe").attr("src",src);
attrを使って要素の属性を取得や、書き換えを行って実質再読み込みしたのと同じようになっています
こちらの方法だと、ドメインが違っていても正しく動作し
なおかつ、jQueryの強力なセレクタで 簡単に操作することが出来ます。
COMMENT