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

インラインフレーム内のcssを親フレームに適用する

解決済

  • 質問者：angerchike
  • 質問日時：
  • 回答数：6件

インラインフレーム（子ウィンドウ）に表示されているページ（同一ドメイン上のページです）で読み込まれているcssを、ページ読み込み時に親ウィンドウ側でも読み込みたいと思っています。

内容としては

親ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test1.css">

子ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test2.css">

となっているソースをページ呼び出し時に

親ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test2.css">

子ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test2.css">

のように共通していないcssを子ウィンドウ側に合わせて変更したいのです。

子ウィンドウ内のページのソースは訳があって編集する事が出来ないので、親ウィンドウ側で子ウィンドウ内の <link rel="stylesheet" type="text/css" href="test2.css"> の href の値を読みこみ、親ウィンドウ側の href の値を置き換えるといった方法では無いかと思うのですが、具体的にどうすればよいのか分かりません。

どなたかご存知の方、ご教授ください。
よろしくお願いいたします。

また、ブラウザはIE6～8と、Firefoxを想定しています。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.3ベストアンサー

  • 回答者： yyr446
  • 回答日時：

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>

参考URL：http://bmky.net/text/note/javascript-css/
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： yyr446
  • 回答日時：

ごめんなさい。

もう確認されたと思ったので、提示したページを
いじっちゃいました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

私が確認するのが遅かったせいですね。
申し訳ありませんでした。

また、ページを再度修正しなおしていただいたようで...重ねて申し訳ないです。

現状のリンク先では私の環境でも、意図通りの動作をしています。
ご参考にさせていただきます。非常に助かりました。

通報する
お礼日時：2009/07/15 17:24

No.5

  • 回答者： yyr446
  • 回答日時：

だめですか。

お役に立てませんで
このテストページ（投稿内容を確認したページです）
でも色が変わりませんか。
ブラウザーのバージョンや種類の問題でなくタイミングの問題かも知れません。Windows.onloadのイベントでJavaScript実行しているので、iframeのCSSの読み込みが完了して無いのかも知れないです。
コードの最初ににalert文でも入れて、ちょっと待ってから実行してみたらどうです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

>だめですか。お役に立てませんで

とんでもないです。大変参考になっています。

ご提示いただいたテストページを、IE6～8とfirefox3で確認しましたが、やはり色は変わりませんでした。
（親フレームが青、子フレームが緑の状態です。）

私の力が足りずソースの内容が分からないので、まずはソースの内容を理解できるように勉強します。
ありがとうございました。

通報する
お礼日時：2009/07/15 13:18

No.4

  • 回答者： yyr446
  • 回答日時：

直し忘れが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でも動作しているようですし... ）

どういうことなのでしょうか？

補足日時：2009/07/13 14:35
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

ごめんなさい。

だめでしたね
FireBugで見ると
「setting a property that has only a getter」
とエラーがでてますね。
sheetプロパティは読み取りのみでした。甘くはなかった。
そうなると、
child_Cssの全ルールからセレクターとプロパティを読み取って、
親のシートに一つづつルール追加するしかないかもしれません。
もう少し、調べてみます
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yyr446
  • 回答日時：

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;
だけが有効になりました。

なぜなのでしょうか？

補足日時：2009/07/10 11:49
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報