HTMLとjQueryの質問。HTMLのフレームセットでindex.htmlとright.htmlとleft.htmlがあるとします。jQueryを利用してright.htmlからleft.htmlの値を参照したり値を設定する方法を教えてください。jQueryファイル、JSファイルはright.html上で読み込んでいます。

こんな感じ。

フレーム

<frameset cols="40%,*">
<frame src="left.html" id="FRAME_L">
<frame src="right.html">
</frameset>

left.html

<div id="g">GET ME !</div>
<div id="p">???</div>

right.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
    /* 左のフレームから、id = "g" な要素にアクセス */
    $("#b_get").click(function() {
        var f = $("#FRAME_L", top.document);
        var e = $("#g", f.get(0).contentWindow.document);
        alert(e.html());
    });

    /* 左のフレームから、id = "p" な要素にアクセス */
    $("#b_put").click(function() {
        var f = $("#FRAME_L", top.document);
        var e = $("#p", f.get(0).contentWindow.document);
        e.html("PUT PUT PUT");
    });
});
</script>
<button id="b_get">get</button>
<button id="b_put">put</button>

ポイント。

• フレームの中からみて、それを抱えているページの window は、window.parent もしくは window.top
• フレームのページのスクリプトからは、フレームの要素の contentWindow プロパティが、フレームの中の window に相当する
• jQuery 関数では、第二引数 (context) を指定して、jQuery オブジェクトを取得する

フレームのページの window.frames コレクションは、フレームの window に相当するので、こう書いても良い。

    e = $("#g", top.frames[0].document);