• ベストアンサー

iFlame２つを同時に書き換えるには？

一つのファイルに、IE専用のフレームタグのiFlameで2つのフレームを埋め込んでいて、一つが操作画面でもう一つが情報画面という風にしています。 この時、操作フレームでリンクをクリックすると、2つ同時に画面が変わるというものを作りたいと思っています。 一つならば、TARGET指定でリンクさせることができるのですが、同時に2つというやり方がわかりません。是非、お力をお貸し下さい。よろしくお願い致します。 //////////////////iFlameが2つ埋め込まれている画面 <HTML> <HEAD> <TITLE>●画面全体</TITLE> </HEAD> <BODY> ●メイン画面 <iframe src="index_main.html" name="main"></iframe><br><br> ●操作画面 <iframe src="index_control.html" name="control"></iframe> </BODY> </HTML> //////////////////操作ボタンのあるiFlameのページ <HTML> <HEAD> <SCRIPT language="JavaScript"> function Syncro(mPage,cPage){ main.location=mPage; control.location=cPage; } </SCRIPT> </HEAD> <BODY> <A HREF="Javascript:Syncro('main2.html','control2.html')">両方のWINDOWを書き換える</A><BR> </BODY> </HTML>

noname#107402
noname#107402

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

  • ベストアンサー
  • ais
  • ベストアンサー率25% (3/12)
回答No.1

こんにちわ！ ちょうど参考文献があったので、 >>main.location=mPage; >>control.location=cPage; の部分なのですが、 parent.main.location.href=mPage; parent.control.location.href=cPage; にしてみてはいかがでしょう？ parent=現在のフレームの親フレームの意味 　|| ここをtop（最初に定義されたフレーム）やself（自分自身のフレーム）に設定することも可能だそうです♪

noname#107402
質問者

補足

ありがとうございます。しかし、 残念ながら上手くいきませんでした。スペル違いは無いと思いますが、 parent.main.location=mPage; parent.control.location=cPage; も動きません。。なぜでしょう？？

その他の回答 (4)

  • chocolats
  • ベストアンサー率46% (23/49)
回答No.5

leaz024さん、そうですね。hrefが正しかったです＾＾；すみません。 ただ、わたしのスクリプトも、ＩＥ5、ＮＮ4.78で動作確認済みでした。 サーバーにあげても動きます。ＯＳはwin2000です。 ということで、funaさんお手数ですが、動作確認に使われたＯＳとブラウザのバージョンを教えていただないでしょうか？ 気になりますので、よろしくお願いいたします。

noname#107402
質問者

お礼

ありがとうございます。 ちょうど今、書き込みをしたのですが、私のトラブルの原因は、name属性にふさわしくない語を指定した為動かなくなっていました。 alert(parent.screen.location); などでundefineなどで値が出なかったので、変更すれば動きました。ちなみにIE5.5、WIN2000を使っていました。 勉強になりました。ありがとうございました。

  • leaz024
  • ベストアンサー率75% (398/526)
回答No.4

フレームの階層概念と、オブジェクト／プロパティをよく理解されれば解決するでしょう。 まず、フレームの階層は次のようになっていることと思います。 　　画面全体のHTML 　　├index_main.html 　　└index_control.html この時、全体画面HTMLからは、それぞれのフレームに「main」「control」でアクセスできます。 また、それぞれのインラインフレーム内のHTMLから全体画面HTMLは、「parent」でアクセスできます。 （直接の親子関係にあるので、parentの代わりに「top」を指定するのはやめましょう。） これを組み合わせると、たとえばindex_main.htmlからindex_control.htmlへは、「parent.control」でアクセスできることになります。（逆も然り） 次に「location」についてですが、これは「オブジェクト」であり、URLを表すプロパティではありません。 URLを指定する場合は、「hrefプロパティ」に対して行います。 と言うわけで、関数を次のように直せば動きます。（動作確認済み） 　　function Syncro(mPage,cPage){ 　　　　parent.main.location.href = mPage; 　　　　parent.control.location.href = cPage; 　　} （コピペする際は、全角スペースに注意）

noname#107402
質問者

お礼

ありがとうございます。 なるほどです。どれがオブジェクトでどれがプロパティか、ということを把握していませんでした。

  • ais
  • ベストアンサー率25% (3/12)
回答No.3

再登場aisです♪ 私も試してみました！ で、変数を使う形はやはり失敗してしまって。 （すいません、あいまいなアドバイスになってしまって） でも直接URL指定してあげたらちゃんと動いてくれましたよ♪ >>function Syncro(mPage,cPage){ function Syncro(){ >>main.location=mPage; parent.main.location.href="http://www.URL1"; >>control.location=cPage; parent.control.location.href="http://www.URL2"; >>} <A HREF="Javascript:Syncro()">両方のWINDOWを書き換える</A> でどうでしょう？？

noname#107402
質問者

お礼

ありがとうございます。 簡単にテストをすれば、変数の方法でも動きました。でも、本番用に埋め込むと動きません。謎な状況に追い込まれています（笑）

noname#107402
質問者

補足

一応報告させて下さい。 皆様のお力添えで、上手く動作するようになりました。本番では、name属性でscreenという名前を使っていたために動作しなかったようです。（お馬鹿） ありがとうございました。

  • chocolats
  • ベストアンサー率46% (23/49)
回答No.2

操作ボタンのあるiFlameのページの記述を <SCRIPT language="JavaScript"> function Syncro(mPage,cPage){ parent.frames["main"].location=mPage; parent.frames["control"].location=cPage; } </SCRIPT> になります。子フレームから指定する場合、こういう風にparent(親）から書いていけばＯＫです。 また、クリックする場所は始めのものでも大丈夫ですし、 <A HREF="Javascript:Syncro('main2.html','control2.html')">test</a> こういう書き方もありますね。

noname#107402
質問者

補足

ありがとうございます。 しかしながら、動作しないようです。？？？ <a href="main2.html" target="main">操作する</a> では、動作するのでオブジェクトとしては、Windowでしょうか？いずれにしても困っております。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • iframe内をリロードできますか？

    たとえば <HTML> <head> <script language="javascript"> <!-- function a1reload(){ "iframe内をリロードする文章" } //--> </script> </head> <body> <iframe src="a1.html" id="a1iframe"><br> <a href="javascript: a1reload()">ここをクリック</a> </body> </HTML> こんな感じでiframe内をリロードできないでしょうか？ お願いします。

  • フレーム内の履歴の一覧を作成

    フレーム内の履歴の一覧を作成 いつもお世話になっております。 フレーム内で移動したリンクの一覧を作成したいのですが、フレーム内のURLの抽出が分かりません。 下記のように作りましたが、『var　url～』のところの記述では、親htmlのURLが表示されます。 これを改善し、さらに飛んだ先（例ではgooの先)のURLをリスト化することは可能でしょうか？ フレーム内URLのテキスト表示だけでも分かる方がいらっしゃいましたら、ご回答お願いいたします。 <HTML> <HEAD> <TITLE>test1</TITLE> <SCRIPT TYPE="text/javascript"> <!-- var url = location.href; document.write(url); //--> </SCRIPT> </HEAD> <BODY> <BR> <IFRAME NAME="frameA" SRC="http://www.goo.ne.jp/" WIDTH="300" HEIGHT="300" SCROLLING="OFF"> </IFRAME> </BODY> </HTML>

  • HTMLのフレームについて

    左側にメニューを置き、右側をメインにしようとしているのですが、左側のメニューをクリックしても、左側にしか表示されません。 どうすれば良いか教えてください 全体のHTMLが <html> <Html Lang="ja"> <Head> <Title>○</Title> </Head> <Frameset cols="155,*" Frameborder="yes" Scrolling="auto" Bordercolor="#ffcc99"> <Frame src="メニュー～"> <Frame src="メイン～" name="main"> <Noframes> <body> <Center> <p> ○ </p> </Center> </body> </Noframes> </Html> 左（メニュー）のフレームは <html> <Html Lang="ja"> <Head> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <Title>○</Title> </Head> <Body> <BaseFont Size="2"> <Font Size="2"> <A Href="～"　target="main"></A><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> <br> <A Href="～"　target="main"><Img Src="ー" Border="0"></A><br> </Body> </Html> ですよろしくお願いします

  • javascriptを無効にする方法～<iframe>タグが正常に動作しない～

    下記、HTMLを作成したのですが、wikipediaのjavascript?によって、折角開いた、yahooのページもwikipediaにとって変わられてしまいます。 wikipediaのjavascriptを無効にする方法は無いでしょうか？若しくは、こういったjavascriptを見つけた時、強制的に、排除する方法など無いでしょうかね？ 折角開いたページが、こういったjavascriptがあることで全て強制的に飛ばされてとても困っています。 宜しくお願い致します。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <IFRAME src="http://ja.wikipedia.org/" width="900" height="1500"></IFRAME> <HR> <IFRAME src="http://yahoo.co.jp" width="900" height="1500"></IFRAME> </BODY> </HTML>

  • こんなことって出来ますか？

    <HTML> <HEAD> </HEAD> <FRAMESET ROWS="*,20%,5%" Border="0"> <FRAME SRC="top.html" NAME="main"> <FRAME SRC="menu.html" NAME="menu"> <FRAME SRC="yo.html" NAME="yo"> </FRAMESET> <NOFRAMES><BODY> このＨＰはフレーム対応ブラウザでしか御覧いただけません。 </BODY></NOFRAMES> </HTML> という状態で、 mainフレームに表示されているHTMLの見えない部分（スクロールさせないと表示されない部分）をyoフレームに表示させて、mainフレームがスクロールされるとyoフレームのところも随時その下の部分が表示されていく。 つまり、mainフレームの内容にmenuフレームがかぶさってる様に見せたいのですが、そんなことって出来るのでしょうか？ あぁー　こんな説明で伝わるだろうか とっても不安ｗ まったく無知で、こういうことがJavaScriptの分野なのかどうかも分かって無いので、こんな質問ですいません。^^;

  • Mac-IEでの複数フレームのリンク

    02-01-18のkyappunさんの質問と内容的には同じなのですが。 フレーム使用のホームページで、複数フレームを同時に変更したいのですが、MacのIE(5.0)では、どうしても動作しません。 ※WinのIE6.0、NN4.7、NN6.0、MacのNN4.7では動作します。…が、MacのIEでも 動いてほしいのです。 ソースは、以下のようにしました。 （このソースには、こだわってないです） 解決法をご存知の方がいらっしゃいましたら、どうかよろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>フレームのリンク</title> <SCRIPT Language="JavaScript"> <!-- function changepage(top,bottom) { 　 　　parent.head.location.href=top; 　　parent.main.location.href=bottom; } //--> </SCRIPT> </head> <body> <form> <a href="javascript:changepage('head2.html','main2.html')">リンク1</a> <br> <a href="javascript:changepage('head3.html','main3.html')">リンク2</a> </form> </body> </html>

    • ベストアンサー
    • Mac
  • ＣＧＩだとうまくいかない！

    まずは下記ソースをご覧ください。 これを実行させると上下２のフレームができまして、上フレームにある「Jump C」と いうリンクをクリックすると、下フレームが「ccccccccc」というところまでジャンプ するように作りました。 まずは実験版としてＣＧＩでなくＰＣ上でＨＴＭＬファイルを作成(main.cgiがmain.htmになる) しました。その時はうまく下フレームの「cccccccc」までジャンプしたのですが、これを ＣＧＩに作り直して実行させたところ、何も動作しないままでした。 ＣＧＩでもＨＴＭＬ上同様の動きをさせるにはどのようにしたらよろしいでしょうか？ どなたかご存知の方いましたら、ご鞭撻のほどお願い致します。 -------------- main.cgi ------------------------------------- <HTML> <HEAD><TITLE>フレームテスト</TITLE></HEAD> <FRAMESET ROWS="20%,*"> <FRAME SRC="top.cgi" NAME="FRAME2"> <FRAME SRC="btm.cgi" NAME="FRAME3"> </FRAMESET> </HTML> -------------- top.cgi ------------------------------------- <HTML> <head> </head> <body> <a href="right_btm.cgi#c" target="FRAME3">Jump C</a> </body> </html> -------------- btm.cgi ------------------------------------- <HTML> <head> </head> <body> <A NAME="#a">aaaaaaaaa<br><br><br><br><br><br><br><br><br> <A NAME="#b">bbbbbbbbb<br><br><br><br><br><br><br><br><br> <A NAME="#c">ccccccccc<br><br><br><br><br><br><br><br><br> <A NAME="#d">ddddddddddd<br><br><br><br><br><br><br><br><br> </body> </html> ------------------------------------------------------------ このＣＧＩを実行すると、

  • TEXTAREA内の改行位置をinnerHTMLで反映させたい

    例えば、 <HTML> <HEAD> <SCRIPT> function send(){ var message = f1.message.value var str = '<HTML>\n<HEAD>\n</HEAD>\n<BODY>\n' str += ''+ message +'\n' str += '</BODY>\n</HTML>' document.frame1.document.body.document.body.innerHTML = str } </SCRIPT> </HEAD> <BODY> <FORM name="f1"> <TEXTAREA rows="10" cols="40" name="message" onChange="send()"></TEXTAREA> </FORM> <IFRAME name="frame1" id="frame1" width="90%" height="350"></IFRAME> </BODY> </HTML> このような記述をして、テキストエリア内に文字を数行にわたって書き込んでも改行はされません。 どのようにすれば改行されるようになりますか？ innerHTMLのところをinnerTEXTとして改行位置に<BR>タグが入るようにするのでもかまわないのですが、、、 どなたかお分かりになる方、ご教授願います。

  • IFLAMEを含む画面を印刷する(追：qa3311546)

    IFLAMEを含む画面を印刷したいと思い、以下を参照しました。 http://okwave.jp/qa3311546.html やりたいことはこの通りなのですが、スクリプトの配置方法が よく分かりません。ご教授いただければ、幸いです。 前提： ●　print.htmlをアクセス可能なディレクトリに配置しました。 ●　親ページのヘッダに<script language=・・で始まる スクリプトを追記しました。 ●　親ページのボタンを配置したい部分に<div id="text">・・で 始まるスクリプトを追記しました。 不明点： （１）　<iframe src="test1.html" name="ifr"></iframe>を 配置する場所（親ページ？　子ページ？のどの部分か）が 不明です。また、「test1.html」の部分をどのように書き換えれば 良いのか不明です。 （２）　（１）と同様に、<iframe src="" name="pfr" width="0px" height="0px" frameborder="0"></iframe>の配置する場所が不明です。 直接的なご回答が難しければ、参考となるURLだけでも結構ですので、 ご教授いただければ幸いです。 どうぞよろしくお願いいたします。

  • フレームサイズの変更について

    過去ログを参照していたら、次のようなサンプルを発見したのですが、 IEでは動作しますが、FireFoxではエラーになってしまいます。 どこを修正すれば動くようになるでしょうか？ ■frame.html■ <html> <head><title></title> <script language="javascript"> <!-- document.write(frset('40%','60%','a.htm?','1.htm?')) function frset(a,b,f1,f2){ var frset= '<title>frame</title>\n' +'<frameset cols="'+a+','+b+'">\n' +'<frame src="'+f1+'">\n' +'<frame src="'+f2+'">\n' +'</frameset>\n' return frset } //--> </script> </head> </html> ■a.html■ <html> <head><title></title> </head> <body> 右のリンクで<br>フレームのサイズ<br>が変わるよ！ </body> </html> ■1.html■ <html> <head><title></title> <script language="javascript"> <!-- function chsize(a,b){ if(location.search==""){ if(document.all){ parent.document.all.tags("frameset")[0].cols=a+","+b }else{ //parent.document.open() parent.document.write(frset(a,b,parent.frames[0].location.href+"?",parent.frames[1].location.href+"?")) parent.document.close() } } } //--> </script> </head> <body onload="chsize('40%','60%')"> こっち側６０％です。 <br> <a href="2.htm">こっち側を４０％にする！</a> </body> </html> ■2.html■ <html> <head><title></title> <script language="javascript"> <!-- function chsize(a,b){ if(location.search==""){ if(document.all){ parent.document.all.tags("frameset")[0].cols=a+","+b }else{ //parent.document.open() parent.document.write(frset(a,b,parent.frames[0].location.href+"?",parent.frames[1].location.href+"?")) parent.document.close() } } } //--> </script> </head> <body onload="chsize('60%','40%')"> <a href="1.htm">こっち側を６０％にする！</a> <br> こっち側４０％です。 </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する