下記のhogeに sample.css のスタイルを適用する方法を教えてください。


<iframe id="hoge" src="xxx.html"></iframe>として
xxx.htmlで<link>としてcssを読み込むというのは抜きです。

http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20%A5%AF%A5%ED%A5%B9%A5%D6%A5%E9%A5%A6%A5%B6%A4%CB%B4%D8%A4%B9%A4%EB%A5%E1%A5%E2

この辺を見ているのですがわからず困っています。

よろしくお願いします。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
</head>
<body>
<iframe id="hoge"></iframe>
</body>
</html>

回答の条件
  • 1人2回まで
  • 登録:2007/03/21 23:46:09
  • 終了:2007/03/24 06:29:11

回答(3件)

id:hmiyaza1 No.1

hmiyaza1回答回数32ベストアンサー獲得回数32007/03/22 00:08:59

ポイント6pt

これをIframeに応用すればできそうですね。(Scriptが無効になっているとダメですが。。)

外部CSSの切り替え

id:worldtravel

> id属性を指定した link タグでスタイルシートが定義されていることが前提です

とありますので違います。

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

2007/03/22 00:12:09
id:nandedarou No.2

nandedarou回答回数230ベストアンサー獲得回数342007/03/22 01:15:42

ポイント37pt
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script>
<!--
function set_text(){
    window.frames['hoge'].document.write(
    '<html><head></head><body>'
    + document.form.text.value
    + '</body></html>'
    );
    set_css();
}
function set_css(){
    window.frames['hoge'].document.createStyleSheet("sample.css");
}
//-->
</script>
</head>
<body>
<FORM name="form">
<INPUT type="text" name="text">
<INPUT type="button" value="表示" onClick="set_text();">
</FORM>
<iframe id="hoge"></iframe>
</body>
</html> 

前回のご質問を拝見いたしました。

提示されたHTMLのiframeタグにsrc属性がないことから、今回のご質問は、前回の続きと判断し、

テキスト表示部分は、前回のsusie-t様の回答とほぼ同じにしました。

これで、どうでしょうか?

id:worldtravel

お返事が遅くなりましてすいません。

急ぎの用事で確認ができないので後日確認します。

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

2007/03/24 06:28:10
id:susie-t No.3

susie-t回答回数99ベストアンサー獲得回数182007/03/22 11:51:03

ポイント37pt

補足させてください。nandedarouさんの方法でIE6なら問題ないと思いますが、Firefoxで動作しないです。(というか、前回の私の回答もFirefoxで動作せず・・・。)

なので、Firefoxでも動作するように改良した版を提示します。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<script>
<!--
function getIFrameDocument(aID){
  if (document.getElementById(aID).contentDocument){  
    return document.getElementById(aID).contentDocument;
  } else {
    return document.frames[aID].document;
  }
}
function set_text(){
  var hoge = getIFrameDocument('hoge');
  hoge.write("<html><head><link id='style' rel='stylesheet' type='text/css' href='sample.css'/></head><body>"
  + document.form.text.value + "</body></html>");
  hoge.close();
}
function change_css(){
  var hoge = getIFrameDocument('hoge');
  hoge.getElementById('style').href = "sample2.css";
}
//-->
</script>
</head>
<body>
<FORM name="form">
<INPUT type="text" name="text">
<INPUT type="button" value="表示" onClick="set_text();">
<INPUT type="button" value="スタイル変更" onClick="change_css();">
</FORM>
<iframe id="hoge" ></iframe>
</body>
</html>

FireFoxでもidでiframeのdocumentが取れるようにgetIFrameDocument関数を作成しました(某所よりの引用です)。

documentのcloseをしないと、Firefoxでいつまでもロード中状態のままとなってしまいます。

cssは、つまりはベタ書きです^^;(もし、この点で趣旨に反していたらすみません。)その後であれば、スタイルのタグのhrefを書き換えることで適用cssを変えることができます。

参考になれば幸いです。

(前回の質問にこちらへの参照を促すコメントを付けておきます)

getIFrameDocument関数引用元:http://devedge-temp.mozilla.org/viewsource/2003/midas/01/example...

(http://www.mozilla-japan.org/editor/midas-spec.html 関連)

id:worldtravel

お返事が遅くなりましてすいません。

急ぎの用事で確認ができないので後日確認します。

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

2007/03/24 06:28:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません