インラインフレーム(子ウィンドウ)に表示されているページ(同一ドメイン上のページです)で読み込まれている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を想定しています。
No.3ベストアンサー
- 回答日時:
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/
No.5
- 回答日時:
だめですか。
お役に立てませんでこのテストページ(投稿内容を確認したページです)
でも色が変わりませんか。
ブラウザーのバージョンや種類の問題でなくタイミングの問題かも知れません。Windows.onloadのイベントでJavaScript実行しているので、iframeのCSSの読み込みが完了して無いのかも知れないです。
コードの最初ににalert文でも入れて、ちょっと待ってから実行してみたらどうです。
>だめですか。お役に立てませんで
とんでもないです。大変参考になっています。
ご提示いただいたテストページを、IE6~8とfirefox3で確認しましたが、やはり色は変わりませんでした。
(親フレームが青、子フレームが緑の状態です。)
私の力が足りずソースの内容が分からないので、まずはソースの内容を理解できるように勉強します。
ありがとうございました。
No.4
- 回答日時:
直し忘れが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でも動作しているようですし... )
どういうことなのでしょうか?
No.2
- 回答日時:
ごめんなさい。
だめでしたねFireBugで見ると
「setting a property that has only a getter」
とエラーがでてますね。
sheetプロパティは読み取りのみでした。甘くはなかった。
そうなると、
child_Cssの全ルールからセレクターとプロパティを読み取って、
親のシートに一つづつルール追加するしかないかもしれません。
もう少し、調べてみます
No.1
- 回答日時:
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;
だけが有効になりました。
なぜなのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Ruby htmlの記述で link rel=stylesheet href=ress.cssの指定をする l 1 2023/04/02 21:15
- HTML・CSS PrettierのHTMLの記述変更 linkタグ 1 2022/06/23 04:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
イラストレーター、縦中横のシ...
-
Q&A掲示板の入力フォームに文字...
-
GASでGoogleフォームの自動返信...
-
指定時間になったら、WEBサイト...
-
変数名をどのようにつけるのが...
-
console.logがどうしても2つ機...
-
jsで、配列内の文章を改行する...
-
①入力フォーム→②確認表示画面→③...
-
二次元配列を使って順位をだす...
-
フォームが空欄の時にフォーム...
-
セレクトを全て選択されていな...
-
アップロードファイルの種類に...
-
jsで質問です。 ボタンが二つ存...
-
階層別の組織図の自動作成について
-
変数のスコープの問題?
-
iOSのみダブルタップが必要
-
画面遷移を行わずに同一ページ...
-
読み込んだQRコードをフォーム...
-
スマホ上で、左右スワイプで次...
-
【Google Apps Script】「ライ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
jsで質問です。 displayプロパ...
-
画面遷移を行わずに同一ページ...
-
Googleフォームで選択肢に応じ...
-
特定の文字列を複数抜き出した...
-
フロントエンドフレームワーク...
-
変数名をどのようにつけるのが...
-
【JS】selectでchangeした時の...
-
React hooksが値を返して配列変...
-
オブジェクトから任意のプロパ...
-
指定時間になったら、WEBサイト...
-
Colorboxがうまく設置できません
-
二次元配列の中の各行の要素を...
-
読み込んだQRコードをフォーム...
-
IndexedDB を使ってファイルア...
-
HTMLで作った時報アプリが動き...
-
GASに文字列として関数を入れる...
-
GASでGoogleフォームの自動返信...
-
①入力フォーム→②確認表示画面→③...
おすすめ情報