iframeの親子間・子同士の操作いろいろまとめ

苦戦した～～～。

以下、こんな感じの構造を想定していきます。

＜親 parent.html＞

<div id="header">ヘッダ</div>

<iframe id="iframe_1" src="child_1.html">

<iframe id="iframe_2" src="child_2.html">

＜子 child_*.html＞

<div id="child_1_content">子1</div>

<div id="child_2_content">子2</div>

子から親を書き換える

＜JS（子）＞

$("#header", parent.document).text("ヘッダを更新");

親が、書き換えられたタイミングでアクションを起こす

＜JS（子）＞

parent.$("#header", parent.document).text("ヘッダを更新").change();

＜JS（親）＞

$("#header").change(function(){
	alert($("#header").text());
});

これはちょっと悩んだ。
子側で、明示的にchangeイベントを送ることと、先頭の「parent.」がポイント。

親から子を書き換える

＜JS（親）＞

$("#iframe_1").contents().find("#child_1_content").text("子1を更新");

書き換えだけならこれでOK。

ついでに、書き換えられたときに子側でアクションを起こしてみたかったのだがうまくいかなかった。
iframeに「name="hoge"」を足して
「document.hoge.$(document.hoge.document).find("#child_1_content").text("子1を更新").change();」
みたいなのを試してみたのだが「document.hoge は未定義」みたいなエラーになる。
とりあえず今は困ってないので未解決だけど一旦放置。
参考：jQueryでiframeと親window同士でイベントをtriggerする

子1から子2を書き換える

＜JS（子1）＞

parent.$("#iframe_2").contents().find("#child_2_content").text("子1から子2を更新");

子から子を書き換えるのが必要になってる時点で設計がおかしい気がしなくもない

子だけリロード（親側で操作）

＜JS（親）＞

$("#iframe_1")[0].contentDocument.location.reload(true);

子だけリロード（子自身で操作）

＜JS（子）＞

location.reload();

まあこれはフレーム関係ないんですけどね。
特に気にせず、フレーム内でリロードしてくれますということで。

子だけリロード（子1が子2を操作）

＜JS（子）＞

parent.$("#iframe_2")[0].contentDocument.location.reload(true);

子から子を書き換えるのが必要になってる時点でｒｙ

子だけページ遷移（親から操作）

＜JS（親）＞

$("#iframe_1")[0].contentDocument.location.replace("child_2.html");

子だけページ遷移（子自身で操作）

＜JS（子）＞

location.href = "child_2.html";

これもフレームは関係ないんですが、フレーム内で遷移してくれます。

子だけページ遷移（子1から子2の遷移を操作）

＜JS（子1）＞

parent.$("#iframe_2")[0].contentDocument.location.replace("child_1.html");

子から子を書き換えるのがｒｙ