JavaScriptで違うフレームのCSSを読み替える方法

2013/05/22 17:51

このQ&Aのポイント

JavaScriptを使用して、一つの子フレームのコンボボックスを操作すると、もう一つの子フレームのCSSが変化する内容を実現したいと思っています。
質問者は過去のログを参考に修正を試みましたが、うまくいかなかったようです。
質問者は以下のコードを提供しており、正しい答えを教えて欲しいとしています。

JS 違うフレームのCSSを読み替える方法

いつもお世話になります。過去に何度も出ている質問なのですが、どれをやってみてもうまくいきませんので、今更ながら質問させていただきます。 JavaScriptを使用して、一つの子フレームのコンボボックスを操作すると、もう一つの子フレームのCSSが変化する内容を実現したいと思っています。様々な過去ログなどを見て、自分なりに修正してみたのですが、上手くいきません。コードを記述いたしますので、悪い点などを指摘し、正しい答えを教えていただければ幸いです。以下コード－－－－－－－－－－－－－－－－フレームセット <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title></title> </head> <frameset cols="200,*"> <frame src="menu.htm" id='menu'>  <frameset rows="100,*"> <frame src="top.htm" id="up"> <frame src="page0.htm" name="main1"> </frameset> <noframes> <body> <p>フレームの代替内容</p> </body> </noframes> </frameset> </html> 子フレーム(操作する側) <html> <head> <title></title> <script type="text/javascript" src="common.js"></script> </head> <body> <select onchange="changesytle(value);"> <option value="style.css">標準スタイル</option> <option value="">スタイルなし</option> </select> </body> </html> 子フレーム(操作される側) <html> <head> <link rel="stylesheet" type="text/css" href="style.css" id="mystyle">  <title></title> </head> <body> <h1>ここの文字の色が変わります。</h1> </body> </html> common.js function changesytle(cssfile) { main1.document.getElementById('mystyle').href = cssfile; // ↑これがうまくいかない } style.css h1 { color : #ff0000; } －－－－－－－－－－－－－－－－－－－－－以上です。何卒よろしくお願いいたします。

tatapatank
お礼率48% (91/187)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2013/05/22 18:54 回答No.1

フレームに関してはよく知りませんが、とりあえず2点ほど。 main1では認識されないでしょうから、parent.main1にすることで大抵のブラウザは認識してくれるかと思います。ただし、nameやidをそのままスクリプトのオブジェクトとして扱うのは何かとあるので、window.parent.frames["main1"]とかになるのかな… もう1点は、関数呼出しの引数がいきなりvalueでは、さすがに通じないと思います。 this.valueなどで渡してください。

質問者

お礼 2013/05/27 09:52

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

質問者

補足 2013/05/23 08:17

ご回答、ありがとうございます。教えていただいた方法で試してみたところ、 IE9では正しく動作しました。ですが、標準で使用しているのはChromeなので、 Chromeで動作させたいのですが、そちらだと動作してくれません。もちろん、フレーム自体は問題なく出るのですが…。機種依存することなく動かす方法はありますでしょうか。最悪な時はChromomeのみで動作するという形でも構わないのですが…。解決策がありましたら、ぜひご教授願えますでしょうか。よろしくお願いいたします。

その他の回答 (2)

fujillin
ベストアンサー率61% (1594/2576)

2013/05/23 11:15 回答No.3

A No1です。＞そちらだと動作してくれません。手元にChromeがありませんので、何をどうしたらどうなったのか不明だとなんともわかりかねます。以下、推測で書かせていただきますが、ＤＯＭが取得できていないのでしょうか？あるいはそれ以前にDocumentが取得できていないとか？そのあたりの事象によって対処方法は変わってくると思います。 No1にも書きましたように、オブジェクトを名前（ご質問の場合main1）で指定するのはいろいろと問題がありそうなのですが、そういう指定方法で実行されたのでしょうか？それであれば前述の別法で試してみるとか。あるいは、documentは取得できていてframesが取得できないのであれば、getElementsByTagNameで取得して走査するとか、どこまでが取得できてどこがまずいのかを調べてみてください。それとも、全然違うところで引っかかっているのでしょうか？コードが1行しかないので、順に調べていけばどこで処理が滞っているのかはすぐにわかると思います。

質問者

補足 2013/05/23 16:01

何度も申し訳ありません。ご指摘のあった、window.parent.frames["main1"].document.getElementById('mystyle').href = cssfile; の部分と、this.valueの部分は修正しました。 IEの時も、「ActiveX」を許可するかどうか聞いてくるので、『はい』で答えたところ、正常に動くようになりました。 ChromeではActiveX云々すら聞いてこないため、自力で拡張機能として ActiveXを入れてみたのですが、やはりだめでした。 IEの場合は、JSのところでalertで取得してみましたが、ちゃんと通っているようですが、chromeでは例のwindow.parent.frames["main1"]～～の部分で落ちているようです。たびたびご迷惑をおかけいたしますが、よろしければお願いいたします。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/05/22 19:38 回答No.2

いまどきflameとは珍しい・・否定されて13年目に・・　1999年HTML4.01の勧告より　『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 flameで呼ばれるHTMLは全く独立したHTMLですから、リンクで再度呼び出す形にしないと出来ません。呼び出されるHTMLは、呼び出されたときの#(ページ内リンク)なりcookieなり、PATH_INFOなり、QUERY_STRINGでスタイルシートへのパスを書き直すことになります。　そんな複雑なことをするより、いっそflameのような過去の技術を使わず、「コンテンツ( http://hpcgi1.nifty.com/Iruka/contents.html )」のように、ひとつのHTMLで処理したほうが楽でしょう。　なぜフレームなのですか？