プロが教えるわが家の防犯対策術!

親ページに文字サイズ変更ボタンを設置していて、文字サイズ変更
ボタンをクリックした場合、そのページのHTMLと、インライン
フレーム内のHTMLの文字サイズを同時に変更することは可能
でしょうか?
現在はprototype.jsを外部から読み込み、以下のソースで作成して
いますが、どうしてもインラインフレーム内の文字の大きさが変更
できません。

何度もいろいろ方法を試してみたのですが、うまくいきません。
どうかよろしくお願いします。


<html>
<head>
<title></title>
<script type="text/javascript">
function setLargeFont(){
Element.setStyle('stopnlisten',
{
"font-size" : "x-large"
});
}
function setMidStyle(){
Element.setStyle('stopnlisten',
{
"font-size" : "medium"
});
}
function setSmallStyle(){
Element.setStyle('stopnlisten',
{
"font-size" : "x-small"
});
}
</script>
</head>
<body id="stopnlisten">
<ul id="font-setting">
<li><button onclick="setLargeFont();" id="font-large">大</button></li>
<li><button onclick="setMidStyle();" id="font-medium">中</button></li>
<li><button onclick="setSmallStyle();" id="font-large">小</button></li>
</ul>
<p>
<iframe src="~" id="stopnlisten"></iframe>
</p>
</body>
</html>

A 回答 (3件)

#2です。


必要に応じて文字サイズの変更をしたい要素にElement.setStyleをやっていけば大丈夫じゃないでしょうか?

親HTMLのbodyのfont-sizeを変えるなら
Element.setStyle(document.body,
{
"font-size" : obj.id.substring(5)
});
    • good
    • 0
この回答へのお礼

できました!

素早いお返事で大変助かりました。
丁寧に教えて頂き、ありがとうございました!

お礼日時:2007/08/28 17:41

iframeはオブジェクトですが、その内側はまた別のdocumentになりますので、


$('stopnlisten')では操作できないと思います。
iframe内のオブジェクトにアクセスする手段はIEとそれ以外で違うのですが
prototype.jsでこのあたりのブラウザの違いを吸収してくれているかどうかはわかりません。

ってわけで、とりあえずIEとFirefoxでだけ確認したサンプルです。
(一部、関係ない部分も好みで修正してます。)

<html>
<head>
<title></title>
</head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function setFont(obj){
Element.setStyle(
($('stopnlisten').contentWindow)?
$('stopnlisten').contentWindow.document.body:
$('stopnlisten').document.body,
{
"font-size" : obj.id.substring(5)
});
}

</script>
<body>
<ul id="font-setting">
<li><button onclick="setFont(this);" id="font-x-large">大</button></li>
<li><button onclick="setFont(this);" id="font-medium">中</button></li>
<li><button onclick="setFont(this);" id="font-x-small">小</button></li>
<p><iframe src="~" id="stopnlisten"></iframe></p>
</body>
</html>
    • good
    • 0
この回答へのお礼

早速のお返事ありがとうございます!

試してみた所、確かに子HTML(インラインフレーム内)の
フォントサイズは変更できたのですが、親HTML内のフォントサイズ
は変更できませんでした。

質問の仕方が不十分だったかもしれません。

親HTML内に配置した文字サイズ変更ボタンを一度クリックすると
親HTML、子HTML双方のフォントサイズを同時に変更できるように
したいと考えています。

可能なのでしょうか?

お礼日時:2007/08/28 15:37

試したことあるんですがiframeの内側のHTMLにアクセスする手段がないですね。

    • good
    • 0
この回答へのお礼

お返事ありがとうございます。

なかなかないですよね・・・
トライアンドエラーの連続です。

どうしても実現したい機能なので、
もう少し頑張ってみます!

ありがとうございました!

お礼日時:2007/08/28 15:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!