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

2023/09/04 22:02

このQ&Aのポイント

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

ベストアンサー

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

2013/05/22 17:51

いつもお世話になります。過去に何度も出ている質問なのですが、どれをやってみてもうまくいきませんので、今更ながら質問させていただきます。 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で処理したほうが楽でしょう。　なぜフレームなのですか？

関連するQ&A

右側のフレームを上にするには？
<html> <head> <title>フレーム</title> </head> <frameset rows="100,*"> <frame src="about.html"> <frameset cols="*,500"> <frame src="link.html"> <frame src="img/index.html"> </frameset> <noframes> <body> 未対応ブラウザ向け内容</body> </noframes> </frameset> </html> --------------------------------- コレでは右フレームが上フレームより下になっているんです。どうすれば右が上（に重ねている）になりますか??
- 締切済み
- その他([技術者向] コンピューター)
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>
- ベストアンサー
- JavaScript
フレームのことなんですが
説明しにくいので、もしわかりにくければ下記のソースを参考にご回答いただけるとありがたいです（４つ有効なリンクが貼ってあります）。四分割のフレームをつくりました。その内の一つにyahoo.co.jpを設定してあります。そのyahooの右側の「個人ツール」の箇所だけ焦点をあてて表示させる方法はありませんか？一目でメールチェックができるようにしたいので。なお、HP作成ではなく、まったくのローカルで使うものです。 <HTML> <HEAD> <TITLE>LINK</TITLE> </HEAD> <FRAMESET COLS="50%,50%"> <FRAMESET ROWS="42%,58%"> <FRAME SRC="http://www.google.co.jp" NAME="google" SCROLLING="auto" > <FRAME SRC="http://www.goo.ne.jp" NAME="goo" SCROLLING="auto" > </FRAMESET> <FRAMESET ROWS="73%,27%"> <FRAME SRC="http://www.yahoo.co.jp" NAME="yahoo" SCROLLING="auto" > <FRAME SRC="http://www.infoseek.jp" NAME="infoseek" SCROLLING="auto" > </FRAMESET> <NOFRAMES> <BODY> 本ページはフレームで構成されております。<BR> フレーム未対応のブラウザでは表示できませんのでご了承ください。</BODY> </NOFRAMES> </FRAMESET> </HTML>
- ベストアンサー
- HTML
htmlのフレームについて
メモ帳からホームページをつくっています二分割フレームを作っていて、それぞれ　frame.html framelight.html framemigi というふうに保存しています一応分割するためのページには <Html> <Head> <Title>フレームのページ</Title> </Head> <Frameset cols="150,*"> <Frame name="hidari" src="1.html"> <Frame name="migi" src="2.html"> </Frameset> <Noframes> フレーム未対応ブラウザへ表示される部分。 </Noframes> </Html> をコピペして作ってあります　　　 src=　のところは変えてありますパソコン内からframe.htmlを開くと分割されたものしか出ませんそうゆうものなのでしょうか
- 締切済み
- その他（インターネット接続・通信）
フレームページのソース
こんにちは。フレームページのソースについて質問させてください。 <FRAMESET COLS="20%,*" BORDER=0> <FRAME NAME="menu" SRC="menu.html" scrolling="auto" NORESIZE> <FRAME NAME="main" SRC="main.html" scrolling="auto" NORESIZE> </FRAMESET> これを　どこに入れるかですが、私が知っているソースの常識は、１、</HEAD>のすぐ後には必ず<BODY> ２、</HTML> のすぐ前は必ず</BODY> です。これを守ってソースを書き込んでみると、 <HTML> <HEAD> <FRAMESET COLS="20%,*" BORDER=0> <FRAME NAME="menu" SRC="menu.html" scrolling="auto" NORESIZE> <FRAME NAME="main" SRC="main.html" scrolling="auto" NORESIZE> </FRAMESET> <TITLE>タイトル</TITLE> </HEAD> <BODY> <NOFRAMES> <P>サイトの説明</P> </NOFRAMES> </BODY> </HTML> このようになると思うのですが、 <HEAD>と</HEAD>に入れ込んでいいのでしょうか。 </HEAD>の下に持ってこようとすると１、２、の常識に当てはまらなくなったりするのです。他のサイトさんのソースを見てみますと皆さん</HEAD>下に入れていらっしゃるようです。トップページに使用しているのでとても不安です。どなたか、自信のある方、教えていただけないでしょうか。
- ベストアンサー
- HTML
ファイヤーフォックスでは、フレームが表示されません。
タイトル通りで、当方のホームページビルダーＶ６．５で作ったＨＰのフレームがファイヤーフォックスでは、表示されません。どうしたらいいか教えてください。＜フレームページ＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY></BODY> </HTML> ＜インデックスページ＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <FRAMESET cols="15%,85%"> <FRAME src="newpage2.htm"> <FRAME src="newpage3.htm"> <NOFRAMES> <BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
フレームが表示できません
現在ホームページをつくっているのですが、フレームのhtmlをいれても、「このページは表示できません」とでてきます。一応同じ質問のページを見てきたのですが、よく分かりませんでした。使っているhtmlは、 <html> <head> <title></title> </head> <frameset cols="200,*" border="0"> <frame name="left" src="b.html" scrolling="yes"> <frame name="right" src="c.html" scrolling="yes"> </frameset> <noframes> </noframes> <html> です。宜しくお願いします。
- ベストアンサー
- HTML
フレームページに文字が表示されなくて困ってます＞＜
フレームページに文字が表示されなくて困ってます＞＜フレームページは表示されるのですがmenu.html.htmlやcontents.html.htmlに書いた文字が表示されませんどこが間違っているのでしょうか？ーーフレームページーー <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タトル</TITLE> </HEAD> <FRAMESET cols="100,*"> <FRAME name="menu.html.html" src="file:///D:/happystyle/menu.html.html"> <FRAME name="contents.html.html" src="file:///D:/happystyle/contents.html.html"> <NOFRAMES> <BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> ーーmenu.html.htmlーー <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイトル</TITLE> </HEAD> <BODY> 画像置き場 </BODY> </HTML> ーーcontents.html.htmlーー <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイトル</TITLE> </HEAD> <BODY> 画像表示 </BODY> </HTML> というHTMLを書きました！フレームに表示させたいページのHTMLはフレームと同じフォルダに入っているのですがこれと関係ありますか？どこがおかしいのかまったくわからないです教えてください！
- ベストアンサー
- その他([技術者向] コンピューター)
ｆｃ２においてのフレームページについて
fc2で作ったページをメモ帳でフレームページにしているのですが fc2にアップロードしてプレビューすると左のメニュー欄しかでないんです。右のメインでは最初から出てくるページもメニューで指定することででてくるページも全部404Error - Page not foundになります。色々見渡して確認してみましたが、まだどこか見落としているみたいですので、どうか、間違いを指摘してくれませんでしょうか。 HTMLは以下のように作成しました：ファイルframe.html： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>てすと</TITLE> </HEAD> <FRAMESET cols="180,*"> <FRAME src="m.menu.html" name="menu"> <FRAME src="top.html" name="main"> <noframes> <body> <p>このサイトはフレームを使用しております</p> </body> </noframes> </frameset> </html> ファイルright.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja" xml:lang="ja"> <head> <title>てすと２</title> <meta content="text/html; charset=SJIS" http-equiv="Content-Type" /> <meta content="text/css" http-equiv="Content-Style-Type" /><style type="text/css"> </style></head> <body><h6 style="text-align: center"> <a href="てすと３"target="main"><img alt="" src="イラストのアド" /></a> </h6> （本当はもっとあります；：ファイルleft.html： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>top</title> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css"> </style> </head> <body> <p style="text-align: center">いろいろ</p> </body> 何が駄目なのでしょうか・・もしかしたらほんのささいなことかもしれませんがご指摘お願いします、もし表示が不十分でしたら後に追加します
- ベストアンサー
- レンタルサーバ・ASP
フレーム内から親ウィンドウにロケーション？
こんにちは。どなたかよい解決策をご存知でしたら教えてください。フレームで切られたウィンドウの一部のフレームから、PHP（ver.3）でページをロケーションで呼ぶと、そのフレームの中に呼んだページが表示されてしまいます。 JavaScriptは使わずに、親ウィンドウにページを表示させることは出来ないでしょうか、、、よろしくお願いいたします。以下はイメージサンプルです。 ■frame.html <html> <head><title>フレームセット</title></head> <frameset cols="100,*" frameborder="NO" border="0" framespacing="0"> <frameset name="left" rows="60,*" frameborder="NO" border="0" framespacing="0"> <frame name="a" noresize scrolling="NO" src="./test1.html"> <frame name="b" noresize src="./test2.html"> </frameset> <frameset name="right" rows="44,*" frameborder="NO" border="0" framespacing="0"> <frame name="c" noresize scrolling="NO" src="./test3.html"> <frame name="d" noresize src="./locat.php3"> </frameset> <noframes> このページはフレーム対応のブラウザでご覧ください。 </noframes> </frameset> </html> ■locat.php3 <? header("Location: ./test4.html"); exit(); ?> ■test1.html <html> <head><title>テスト1</title></head> <body> 左上 </body> </html> ■test2.html <html> <head><title>テスト2</title></head> <body> 左下 </body> </html> ■test3.html <html> <head><title>テスト3</title></head> <body> 右上 </body> </html> ■test4.html <html> <head><title>テスト4</title></head> <body> このページをウィンドウ全画面に表示 </body> </html>
- 締切済み
- PHP

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

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