- ベストアンサー
インラインフレーム内のcssを親フレームに適用する方法
- インラインフレーム内のcssを親フレームにも適用する方法についてご教授ください。
- 子ウィンドウに読み込まれているcssを親ウィンドウでも読み込む方法を教えてください。
- IE6～8とFirefoxを使用している場合に、インラインフレーム内のcssを親フレームに反映させる方法を教えてください。
- angerchike
- お礼率33% (2/6)
- JavaScript
- 回答数6
- ありがとう数3
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
No1,No2の回答者です。 以下のようにしたら、一応出来ました。IE7.0とFireFox3.0で試しました。 （※全部のCSSプロパティを試したわけではありませんので...） －test2.cssのスタイルシートのシートオブジェクトよりcssRules又はrulesのメソッドでルールのセレクター、プロパティーを取得し、test2.cssのスタイルシートのシートオブジェクトにaddRule又はinsertRuleのメソッドで追加しました。 ブラウザーによってやり方が異なるようなので、無駄な部分があります。 ブラウザーによって異なるロジックで動くように修正するべきかもしれません。 ＜参考サイトを見て適時にカストマイズしました。カメライズ関数はそのまま使わせてもらいました。＞ <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title>IframeTestCSS</title> <link rel="stylesheet" type="text/css" href="./test.css"> <link rel="stylesheet" type="text/css" href="./test1.css"> </script> <script type="text/javascript" charset="utf-8"> <!-- window.onload = function () { child_Css = hoge.document.styleSheets[1]; My_css = document.styleSheets[1]; var child_rules = child_Css.rules?child_Css.rules:child_Css.cssRules; for (i=0;i<child_rules.length;i++){ selector = child_rules[i].selectorText; selector = selector.toLowerCase(); rule = ""; for (property in child_rules[0].style) { attribute = child_rules[i].style[property.camelize()]; if (attribute){ rule += property + ":" + attribute +";"; if(window.ActiveXObject){ My_css.addRule(selector , " { " + rule + " }",My_css.rules.length+1); }else{ My_css.insertRule(selector + " { " + rule + " }",My_css.cssRules.length); } } } } } String.prototype.camelize = function( ) { return this.replace( /-([a-z])/g, function( $0, $1 ) { return $1.toUpperCase( ) } ); } String.prototype.deCamelize = function( ) { return this.replace( /[A-Z]/g, function( $0 ) { return "-" + $0.toLowerCase( ) } ); } // --> </script> </head> <body> <h1>CSS TEST</h1> <hr /> <iframe name="hoge" src="./iframetest2.htm" height="480" width="640"></iframe> <hr /> </body> </html>
その他の回答 (5)
- yyr446
- ベストアンサー率65% (870/1330)
ごめんなさい。もう確認されたと思ったので、提示したページを いじっちゃいました。
- yyr446
- ベストアンサー率65% (870/1330)
だめですか。お役に立てませんで このテストページ（投稿内容を確認したページです） でも色が変わりませんか。 ブラウザーのバージョンや種類の問題でなくタイミングの問題かも知れません。Windows.onloadのイベントでJavaScript実行しているので、iframeのCSSの読み込みが完了して無いのかも知れないです。 コードの最初ににalert文でも入れて、ちょっと待ってから実行してみたらどうです。
お礼
>だめですか。お役に立てませんで とんでもないです。大変参考になっています。 ご提示いただいたテストページを、IE6～8とfirefox3で確認しましたが、やはり色は変わりませんでした。 （親フレームが青、子フレームが緑の状態です。） 私の力が足りずソースの内容が分からないので、まずはソースの内容を理解できるように勉強します。 ありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
直し忘れが1つありました。 for (property in child_rules[0].style) { でなくて for (property in child_rules[i].style) { です。 それから、iframeに表示するhtml(iframetest2.htm)は <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <title>IframeTestCSS</title> <link rel="stylesheet" type="text/css" href="./test.css"> <link rel="stylesheet" type="text/css" href="./test2.css"> </head> <body> <h1>IFRAME</h1> </body> </html> で、試したCSSは test.css h1 {color:red;font-size:200%; font-weight:bold;} test1.css body {color:#000000;background-color:aqua;} test2.css body {color:#000000;background-color:lime;} とまったく単純な物です。
補足
ご回答ありがとうございます。 上記の内容を修正した上で、ご回答の内容をそのまま使わせていただいたところ、IE6のみが希望通りの動作をし、IE7、8とFirefox3では動作しませんでした。 恥ずかしながら、私の力ではソースの内容を理解する事が出来きず、どうしてこのようなことが起こっているのかがわかりません。 （ yyr446さんの環境ではIE7とFirefox3でも動作しているようですし... ） どういうことなのでしょうか？
- yyr446
- ベストアンサー率65% (870/1330)
ごめんなさい。だめでしたね FireBugで見ると 「setting a property that has only a getter」 とエラーがでてますね。 sheetプロパティは読み取りのみでした。甘くはなかった。 そうなると、 child_Cssの全ルールからセレクターとプロパティを読み取って、 親のシートに一つづつルール追加するしかないかもしれません。 もう少し、調べてみます
- yyr446
- ベストアンサー率65% (870/1330)
CSSのルールは上書きされる。 child_Css = child.document.styleSheets[1]; document.styleSheets[1].disabled = true; document.styleSheets[2] = child_Css; みたいにするのは、だめかしら
補足
ありがとうございます。 試してみましたが、うまくいきませんでした。 まず回答いただいた内容ではまったく動作しませんでした。 ソースの理解は以下で問題ないでしょうか？ （↓）子フレームのスタイルシートから2番目に適用されているものを取得 child_Css = child.document.styleSheets[1]; （↓）親フレームのスタイルシートから2番目に適用されている物を無効化 document.styleSheets[1].disabled = true; （↓）親フレームのスタイルシートの3番目に子フレームの2番目に適用されている項目を追加する。 document.styleSheets[2] = child_Css; また、childがうまく読み込めていないのかと思いソースを iframe = document.getElementById("iframeId").contentDocument; child_Css = iframe.styleSheets[1]; document.styleSheets[1].disabled = true; document.styleSheets[2] = child_Css; としてhtmlのiframeタグにid="iframeId"としてみたところ、 document.styleSheets[1].disabled = true; だけが有効になりました。 なぜなのでしょうか？
お礼
私が確認するのが遅かったせいですね。 申し訳ありませんでした。 また、ページを再度修正しなおしていただいたようで...重ねて申し訳ないです。 現状のリンク先では私の環境でも、意図通りの動作をしています。 ご参考にさせていただきます。非常に助かりました。