こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

frameでのcssの変更する方法

frameを使ってmain.html、menu.htmlを表示し、menu.htmlからmain.htmlのcss(外部)を変更する方法を教えてください。

frameのnameはmain.html→main、menu.html→menu、main.htmlのcssのidはmain、で指定してあります。

以下サンプルです
frame.html
<html>
<head>
</head>
<frameset rows="50,*">
<frame src=main.html name="main">
<frame src=menu.html name="menu">
</frameset>
</html>

main.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css" id="main"> ←(a.cssをb.css変更したい)
</head>
<body>
</body>
</html>

menu.html
<html>
<head>
</head>
<body>
</body>
<a href="#">変更トリガー</a>
</html>

投稿日時 - 2013-08-13 09:52:38

QNo.8217560

困ってます

質問者が選んだベストアンサー

すみません、document 付けるの忘れてました。
window.top.main.onload = function(){
document.getElementById("a").onclick = function(){
window.top.main.document.getElementById("main").href = "b.css";
};
};

onload のところも気を付けて下さい。
手もとのブラウザで試したところ、二重に適用されてしまいました。
これが正しい挙動かどうかも知りませんし、直し方も分かりません。

投稿日時 - 2013-08-14 22:53:25

お礼

以下のコードでうまく行きました

sample.js
window.onload = function(){
document.getElementById("a").onclick = function(){
parent.main.document.getElementById("main").href = "b.css";
}
}

ie,firefoxで動作確認できました

投稿日時 - 2013-08-15 23:25:30

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

参考: http://www.tohoho-web.com/js/window.htm

</body>
<a href="#">変更トリガー</a>
この位置にa要素を書くのはよくないですよ。
doctype宣言も要ります

<head>
</head>
<body>
<div>
<a href="#" onclick="window.top.main.getElementById('main').href = 'b.css';">変更トリガー</a>
</div>
</body>

変更したところで、ちゃんと読みこまれるかどうかは分かりません。
このコードが多くのブラウザで互換かどうか分かりません。

投稿日時 - 2013-08-13 16:35:33

補足

コードミスってました。

sample.js
window.onload = function(){
document.getElementById("a").onclick = function(){
window.top.main.getElementById("main").href = "b.css";
}
}

投稿日時 - 2013-08-14 04:43:31

お礼

回答ありがとうございます。
さっそく回答のコードやってみたんですがうまくいきませんでした。
現在外部のjsファイルから読み込んでやってるんでそれ合わせて載せておきます。

menu.html
<html>
<head>
</head>
<body>
</body>
<button id="a">変更トリガー</button>
</html>

sample.js
window.onload = function(){
document.getElementById("a").onclick = function(){
window.top.main.getElementById("main").href = "b.css";
}

投稿日時 - 2013-08-14 04:41:28

あなたにオススメの質問