親フレーム・子フレームの参照

今日はDOMの操作で子フレームから親フレームに参照したり、親フレームから子フレームに参照と言ったことについてのメモ。

親フレームの要素を参照

親フレーム内のIDがparentのオブジェクトを取得

$(function() {
    parent.$("#parent");
});

// こんな書き方も
$(function() {
    $("#parent",parent.document);
});

親フレーム内の関数を呼び出す

// parent.js
(function($) {
    $.parentFunction = function(i) {
        alert("parentFunction");
    };
})(jQuery);


// child.js
$(function(){
    parent.$.parentFunction();
});

親フレームをここまで厳密に書かなくても単純に$.parentFunctionに関数リテラルを記述すればおkです。

子フレームの要素の参照

iframe(子フレーム)内のIDがchildのオブジェクトを取得

$('iframe').contents().find('#child');

子フレーム内の関数を呼び出す

// parent.js
$(function(){
    $('#parent').click(function () {
        parent.childframe.$.childFunction();
    });
});

// child.js
(function($) {
    $.childFunction = function() {
        alert("child function");
    };
})(jQuery);

子フレームも親フレームと同様です。

正直今日はコレがなかったらかなり辛かった。記事を書いてくれた先駆者のかたありがとう!