JavaScriptを使ってクロスドメインの埋め込みiframeを更新(リロード)する方法

JavaScript

iframeはブラウザの仕様上、クロスドメイン(呼び出すHTMLが自分のドメイン上に無いこと)の場合にはjQueryでもJavaScriptでも操作が出来ません。

ただ、iframeを更新したい時にはちょっぴりイレギュラーな方法でリロードさせることが出来ます。「更新・リロード」のみの操作ですが紹介しておきます。

iframeの中身が同一ドメインの場合

埋め込んでいるiframeが親のHTMLと同一ドメインであれば、特に問題なく再読み込みさせることが可能です。location.reload()を使えば簡単にiframeの更新が出来ますね。

document.getElementById("yourDomID").contentWindow.location.reload();

上の例で特に注意すべき点は、getElementById()しか使えないという点です。getElementByClassName()だと動作しませんでした。(実際に試したのですが動かない模様)

jQueryも使うのであれば、

$('.iframeClassName')[0].contentDocument.location.reload();

何かボタンを押したタイミングや、ブラウザのタブを切り替えるタイミングなどで上記のスクリプトを呼び出してやればOKです。

iframeの中身がクロスドメインの場合

これがちょっと厄介で、iframeの操作は基本的にクロスドメインだとCORSエラーで弾かれてしまいます。reload()も同様でコンソールにエラーが出て動作しません。(リロードぐらいいいじゃないかと思いますが……)

そこでちょっと思考を変えてreload()を使わずに、iframeのsrcを一瞬変えてあげて間接的に再読み込みさせる方法をとります。

プレーンなJavaScriptを使う場合は、

document.getElementById('iframeID').src = document.getElementById('iframeID').src;

や、

document.getElementById('iframeID').src += '';

なんて方法もあります。reloadなんて単語が一つも出てきませんがちゃんとiframeが再読み込みされます。

jQueryを使いたいのであれば、

$('.iframeClassName').attr('src', $('.iframeClassName').attr('src'));

ですね。iframeのsrc属性を自身のscrに書き換えるアクションを起こすことで、iframeが再度読み込まれるようにしてあげます。

タイトルとURLをコピーしました