フレーム越しにフォントサイズの変更（JavaScript）
結構な間更新してなかったので、今日聞かれたことをちょっとメモ。
最近Yahoo!ニュースとかで、フォントサイズが変更できるボタンがあるよね。あれをフレーム越しにやろう、って話。知ってればたいした話じゃないけど、知らないとちょっと悩むかも･･･まぁ、今更フレームってのもあんまり無いんだけど。
まずフォントサイズの変更だけど、簡単に書いちゃうと、
<input type=”button” onClick=”document.body.style.fontSize = 10″ value=”fontsizeを10にする”/>
こんな感じ。大きくしたり小さくする部分は自分で書いてね。
で、フレーム越しにやる場合どうするか。まず、下のようなフレームを作成したとしましょう。
<html>
<head>
<title>フレームサンプル
</head>
<frameset cols=”50%,50%”>
<frame src=”test1.html” name=”frame_test1″>
<frame src=”test2.html” name=”frame_test2″>
</frameset>
</html>
nameを設定するのがポイント。
で、test2.htmlに文章があって、test1.htmlからフォントサイズの変更をしたい、とします。そういう場合のtest1.htmlの内容はこう。
<html>
<head>
<title>フォントサイズ変更テスト</title></head>
<body>
<input type=”button” onClick=”window.parent.frame_test2.document.body.style.fontSize = 1″ value=”右側のfontsizeを10にする”>
</body>
</html>
window.parent でフレームやその下のデータの参照や変更が出来るって訳。ただ、注意しなくちゃいけないのは、同一ドメイン内のURLしかアクセスできないって事。まぁ、別ドメインのパラメータの変更・参照ができるなら、いろいろ悪いこと思いついちゃいますしね。
ポップアップウィンドウの処理もこんな感じ。window.opener で親ウィンドウが参照できます。
何かの参考になれば。
kenji0302 と 
イサム がコメントしています。
イサム 23:39 2008年9月27日 パーマリンク
すべてのインラインフレームのフォントを変更するにはどうすれば良いのでしょうか？
kenji0302 22:07 2008年9月29日 パーマリンク
イサムさま
軽くやってみたんですが…なかなかうまくいかないですね。
参考までに、HTML中のインラインフレーム取得の処理は
こんな感じです。
var iframeObjArray = document.getElementsByTagName('iframe');for(var i=0;iframeObjArray[i];i++){
//フォントサイズ変更処理を書く
iframeObjArray[i].contentDocument.body.fontSize=1;
}
一応、フォントサイズ変更についても書いてはみてるんですが、
これではうまく行かないみたいです。
iframeObjArray[i].contentDocument.body.fontSize=1;
う〜ん、まだまだ修行不足ですね。
気にはなるので、iframeについても判れば追記しておきますね。