iframeと親ウィンドウ間の相互アクセス

親ウィンドウからiframe内の要素を操作したり、その逆を行いたいときの方法です。

jQueryに依存しない書き方ももちろんあるのですが冗長になってしまうので、ここではjQueryを用いたアクセス方法をご紹介します。

親ウィンドウ → iframe内の要素にアクセス

下記でアクセス可能です。

$(iframeを指定).contents().find(iframe内要素)

[ex] 読み込むページ内の要素の高さを取得したい

var height = $('iframe').contents().find('.wrapper').outerHeight();

ここではwrapperというクラス名のついた要素の高さを取得します。

これだけでも十分に動作するのですが、もし読み込み先のページが削除をされてしまったらエラーが発生してしまい、以後のプログラムを実行できなくなってしまいます。

確実に高さを取得できるよう、iframeの読み込みが完了したら取得するようにします。

イレギュラーな事態に備えて、try～catchで囲むことで例外を補足します。

try{
    $('iframe').on('load',function(){
         var height = $('iframe').contents().find('.wrapper').outerHeight();
    });
}catch(e){
    console.log('Cannot load iframe');
}

iframe内 → 親ウィンドウの要素にアクセス

こちらは、下記の方法でアクセス可能です。

parent.$(任意のセレクタ)

[ex] 親ウィンドウにある、任意の要素の背景色を変更

parent.$('#hogehoge').css({'background':'#F00'});

window.parentオブジェクトは、通常は現在のウィンドウを参照するのですが、それがiframeであった場合はiframeを埋め込んでいるウィンドウを参照します。

window.parentオブジェクトについてはこちらで詳しく解説されています。

親ウィンドウのイベントにバインド

ここまでご覧になった方はおおむねご想像がつくと思いますが、outerWidthメソッド や cssメソッドだけでなく、on / off メソッドも同様にして使用することができます。

上記と同じ要領で、親ウィンドウのイベントに関数をバインドすることが可能です。

以下に示すサンプルでは、親ウィンドウのリサイズに合わせてコンソールに文字列を出力しています。

[ex] 親ウィンドウのリサイズに合わせて文字列を出力

parent.on('resize',function(){
     console.log('resizing !');
});

注意

クロスドメインでiframeを扱う記事でも書かせて頂きましたが、別ドメインのページをiframeで読み込んだ際は、セキュリティ上、相互アクセスができない仕様になっています。

仮に別ドメインの要素にアクセスしようとするとエラーになります。

それでも相互に値の受け渡しをしたいときは、別記事に詳しく書かせていただきましたので、そちらをご参照ください。