人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

下記の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>

●質問者: worldtravel
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS hoge HTML スタイル
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● hmiyaza1
●6ポイント

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

外部CSSの切り替え

◎質問者からの返答

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

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

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


2 ● nandedarou
●37ポイント
<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様の回答とほぼ同じにしました。

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

◎質問者からの返答

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

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

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


3 ● susie-t
●37ポイント

補足させてください。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 関連)

◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ