- ベストアンサー
親ページのインラインフレーム内の文字を変更する方法
- 親ページに文字サイズ変更ボタンを設置し、クリックすると親ページとインラインフレーム内の文字サイズを同時に変更できます。
- 現在はprototype.jsを使用していますが、インラインフレーム内の文字の大きさを変更できません。
- 何度も試してみましたが、解決できません。方法が分かる方、助けてください。
- yahmada_31
- お礼率100% (3/3)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#2です。 必要に応じて文字サイズの変更をしたい要素にElement.setStyleをやっていけば大丈夫じゃないでしょうか？ 親HTMLのbodyのfont-sizeを変えるなら Element.setStyle(document.body, { "font-size" : obj.id.substring(5) });
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
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>
お礼
早速のお返事ありがとうございます！ 試してみた所、確かに子HTML(インラインフレーム内)の フォントサイズは変更できたのですが、親HTML内のフォントサイズ は変更できませんでした。 質問の仕方が不十分だったかもしれません。 親HTML内に配置した文字サイズ変更ボタンを一度クリックすると 親HTML、子HTML双方のフォントサイズを同時に変更できるように したいと考えています。 可能なのでしょうか？
- shirayukix
- ベストアンサー率43% (90/207)
試したことあるんですがiframeの内側のHTMLにアクセスする手段がないですね。
お礼
お返事ありがとうございます。 なかなかないですよね・・・ トライアンドエラーの連続です。 どうしても実現したい機能なので、 もう少し頑張ってみます！ ありがとうございました！
お礼
できました！ 素早いお返事で大変助かりました。 丁寧に教えて頂き、ありがとうございました！