JavaScriptメモ - 子フレームから - /var/log/masayoshi/masayoshi.life.log

こんなことってありませんか？

「iframe使ってページを読み込んでるんだけど、そのページから呼び出している元のページを操作したいっ！」
「大丈夫だ、問題ない」

おっと、エルシャダイネタが入りそうなので真面目に真面目に（ｒｙ
ってことでサンプルコード、今回はサンプルページのdivを操作しますよ

動いてる例はサンプルページにてご覧いただけます

呼び出し元:HTML

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=EUC-JP">
		<link rel="stylesheet" type="text/css" href="mother_page.css">
		<script type="text/javascript" src=""></script>
		<title>2011/01/17 - JavaScriptメモ - 子フレームから親の操作- サンプル</title>
	</head>
	<body>
		<iframe src="child_page.html" id="child_page" class="child_page"></iframe>

		<div class="mother_box" id="mother_box">
			水曜どうでしょうというという番組は元々は<br>
			ローカル番組であったが大泉洋ら<br>
			チームナックスの全国区進出により<br>
			全国で放送されるようになった。
		</div>
	</body>
</html>

css:

.child_page{
width:500px;
height:200px;
}

.mother_box{
	width:600px;
	height:200px;
	border:1px solid #000;
	margin:4px;
	font-size:25px;
}

呼び出されるページ:
html:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=EUC-JP">
		<title>小ページ</title>
		<link rel="stylesheet" type="text/css" href="">
		<script type="text/javascript" src="child_page.js"></script>

	</head>
	<body>
		<h1>子ページサンプル</h1>

		<input type="button" onclick="mother_rewrite()" value="データ書き換え">

	</body>
</html>

javascript:

function mother_rewrite(){
parent.document.getElementById("mother_box").innerHTML = "相棒とは2001年より毎年秋から春に掛けて<br>放送される刑事ドラマである。<br>　出演は水谷豊と寺脇康文。<br>寺脇は2008年に当番組を卒業し<br>及川光博が水谷の相棒を務める事になった。" ;
}

とりあえず動くことを確かめるためだけに書いたので内容は雑多です。
書くことと言っても「parent」くらいでしょうか、これは「親ページを操作するぜ！」という事を指しています。
この例だと"親ページにあるmother_boxというidが付いた要素の内容を書き換えるよ"って事です、実際にやったらどうでしょうの説明が相棒の説明に変わりますし。

メモ書き替わりのエントリーなのでツッコミはバシバシと