親フレームの変数にアクセスする方法(JavaScript)

このQ&Aのポイント
  • フレーム内の変数にアクセスする方法をご紹介します。
  • 親フレームの変数にアクセスするには、window.parentを使用します。
  • フレームがある場合は、変数へのアクセスに注意が必要です。
回答を見る
  • ベストアンサー

親フレームの変数にアクセス(JavaScript)

[index.html] <script src="script.js"></script> <frameset rows="50%,*" frameborder="1"> <frame src="content1.html"name="cont1"> <frame src="content2.html" name="cont2"> </frameset> [script.js] var test_text="てすと"; [content1.html] <form> <input type="text" name="in"> <input type="button" onClick="window.parent.test_text = document.forms[0].in.value;" value="IN"> </form> [content2.html] <form> <input type="text" name="out"> <input type="button" onClick="document.forms[0].out.value = window.parent.test_text;" value="OUT"> </form> のようになっています。 「index.html」の「script.js」の変数に、「content.1html」と「content2.html」からアクセスしたいです。 ですが、フレームになっているため、思うような動作をしてくれません。 よろしくお願いします。

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 思うような動作というのがわからないのですが、1.htmlのINで入れた値が下の2のOUTをクリックしたら表示されれば良いのでしょうか? 上記の書き方で行けると思いますが <form> <input type="text" name="out"> <input type="button" onClick="document.forms[0].out.value = window.parent.test_text;" value="OUT"> </form> out.value =□window.parent.test_text;"□value="OUT"> □の部分が全角スペースになっています。 半角にすれば動きませんか?

newtgecko
質問者

お礼

ローカルファイル(?)をネットにアップしたら、Chromeでも期待通りの動きをしてくれました。 なぜ、アップしないと上手く動いてくれないんでしょうね?ローカルファイルのパスに日本語が含まれているからでしょうかね? ChromeはDeveloper Toolsが使えるので重宝している(使い方がほとんどわかりませんが・・・)ですが・・・ これからは「今回みたいな問題もある」ということも頭において作って行きたいです。 お世話になりました

newtgecko
質問者

補足

ありがとうございます! こんばんは 確かめてみると、Firefoxでは、自分の思った通りに動いてくれました。ですが、Chromeだと「てすと」ではなく、「undefined」と表示されてしましました。 JavaScriptは特に文法はよく分かっておらず、試行錯誤でやることが多いので、Webプログラマーさんにアドバイスが聞けてよかったです。(この変数のアクセス方法が正しいことが分かりました) ローカルファイル(?)から開いているのが問題かもしれないので、適当なサーバーにファイルをアップし実行してみて、Chromeの動きを見てみます。

関連するQ&A

  • FireFoxでJavaScriptのエラーが出ます。

    現在JavaScriptを独学しはじめた者ですが、ご回答の方よろしくお願いいたします。 右側のフレームに文字又は数字を入れてクリックすると左側のフレームに反映されると言うスクリプトです。 IEでは問題なく動作しますがFireFoxだと動作しません。 親フレーム <frameset cols="20%,*"> <frame src="left.html" name="left"> <frame src="right.html" name="right"> </frameset> 左側のフレーム <input type="text" name="answer"> 右側のフレーム <form> <input type="text" name="question"> <input type="button" value="click" onclick="parent.left.answer.value=this.form.question.value"> </form> アドバイスよろしくお願いいたします。

  • JavaScriptから別フレームのasp出力ドキュメントにアクセスできません。

    まず以下のソースをご覧ください。 [index.html] <html> <frameset cols=50%,*> <frame src="frame01.html"> <frame src="frame02.asp"> </frameset> </html> [frame01.html] <html> <head> <script type="text/javascript"> <!-- function insertText(){ parent.frames[1].document.myform.mytext.value = "テスト"; } // --> </script> </head> <body> <form> <input type="button" value="出力" onclick="insertText()"> </form> </body> </html> [frame02.aspにより出力されたソース内の記述] <html> <head> </head> <body> <form name="myform"> <input type="text" name="mytext"> </form> </body> </html> frames[0]のボタンを押すとframes[1]のテキストフォームに"テスト"が出力されるようにしています。 frame02.aspが静的なHTMLだった場合は問題なく動作するのですが、aspによって出力されたhtmlではエラーになってしまいます。 これはフォームに対する操作だけでなく、document.write()等のあらゆる操作に該当します。 当方はaspのことは全くわからず、またこのaspの中身を書き換える権限もありません。あくまで出力された結果に対して動的に操作を加えたいのです。 原因としては次のようなものを考えました。 ・aspドキュメントのパスに対してアクセス権限が無い。 ・aspもしくはCGIの実行によってもたらされたHTMLに対してはスクリプトは動作しない。 ・実際の出力結果のヘッダにはJavaScriptが記述されており、これが何らかの影響を及ぼしている。 ・事前にスクリプトから操作を受けないようにプロテクトされている。 ご助力を願えれば幸いです。

  • javascriptからframeへの出力方法

    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function init(){ $("f1").innerHTML = "hoge"; $("f2").innerHTML = "piyo"; } </script> </head> <frameset cols="50%,*" onload="init()" > <frame id="f1"> <frame id="f2"> </frameset> </body> </html> 上記、二つに分けたフレームにそれぞれ"hoge"と"piyo"と表示したいのですが出来ません。フレームにjavascriptからアクセスするにはどうしたらよいですか?

  • VBでのInternetExplorerのオブジェクトへのアクセスについて教えてください!

    はじめて質問させていただきます。 現在VB(WHS?)で自動巡回プログラムを作成しております。 その中で2つ、どうしてもできないことがあるので どうぞよろしくお願いいたします。 1)formも存在している中でformに入っていないオブジェクトの指定方法 ---------------------------------  例:  <FORM name="form1" method="post" >   <INPUT type="text">   <INPUT type="button" value="ボタン1">  </FORM>  <INPUT type="ここに文字をセットしたい"><INPUT type="button" value="これを押したい"> ---------------------------------  ボタン1とかかれたボタンには、  CreateObject("InternetExplorer.Application").document.form1.elements(1).click  などでアクセスすることができますが、フォームに入っていないオブシェクトにアクセスできません。 2)frameの向こうがframeで、その先のソースのオブシェクトの指定方法 ---------------------------------  手前のフレーム  <html>  <frameset rows="*,*">   <frame src="f1.htm" name="f1">   <frame src="f2.htm" name="f2">  </frameset>  </html>  ---------------------------------  奥のフレーム  <html>  <frameset cols="*,*"> <frame src="f1-1.htm" name="f1-1"> <frame src="f1-2.htm" name="f1-1">  </frameset>  </html> ---------------------------------  この状態でf1-1.htm上のオブジェクトにアクセス  (ボタンを押したり値をセット)したいのです。  いろいろためしたのですが、どうしてもできず、  投稿させていただきました。  よろしくお願いいたします。

  • 引数の使い方

    サブのHTML(1)にある関数LC2の引数goの使い方が解りません。 function LC2(){ if (url2.value != "") { parent.f1.location.href=url2.value } else { alert("URLを入力してください") } だったら分かるのですが、引数としてgoをあえて入れる意味が解らないです。 サブのHTML(1) <!DOCTYPE HTML > 省略 <script type="text/javascript"> <!-- function LC2(go){ if (go.url2.value != "") { parent.f1.location.href=go.url2.value } else { alert("URLを入力してください") } } //--> </script> </head> <body> <form name="URL2"> <input type="text" name="url2" value="http://" size=40 > <input type="button" name= "CF2" value=" Go!! " onClick="LC2(this.form)"> </form> </body></html> メインのHTML <!DOCTYPE HTML> <html><head> <title></title> </head> <frameset rows="*,100"> <frame src="f1.html" name="f1"> <frame src="f2.html" name="f2"> </frameset> <noframes> フレーム機能を使用しています。フレーム対応のブラウザで試してください </noframes> </html> サブのHTML(2) <!DOCTYPE HTML > <html><head> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> </head> <body> *入力されたURLを別フレームに表示 </body></html>

  • jQuery 変数の使い方について

    jQuery 変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか? よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </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 http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>

  • 他のフレームにあるボタンを使用不可にするには?

    2つのフレームに分割した画面で、一方のフレームにあるボタンを押したら、他のフレームにあるボタンを使用できなくしたいのですが、うまくいきません。下記のスクリプトでは、エラーになってしまいます。どのようにしたら良いでしょうか、よろしくお願いいたします。 <フレームの設定> <html> <head><title>フレームを縦に分割する</title></head> <frameset cols="50%,50%"> <frame src="left.html" name="light_frame" frameborder=1 border=1> <frame src="right.html" name="left_frame" frameborder=1 border=1> </frameset> </html> <left.htmlの内容> <html> <head> </head> <body> <form name="myform"> <input type="button" name="bt_del" value="削除"> </form> </body> </html> <right.htmlの内容> <SCRIPT Language="JavaScript"> function func1(){ //NG parent.left_frame.document.form.myform.bt_del.disabled = true; //これもNGでした //parent.left_frame.document.forms['myform'].bt_del.disabled = true; } </SCRIPT> <html> <head> </head> <body> <p><input type="button" value="変更" onclick="func1()" > </body> </html> 以上です。

  • javascriptでselectboxのvalueを取得し、特定のv

    javascriptでselectboxのvalueを取得し、特定のvalue値により、「<input type="text" name~>」をブラウザに表示させたいのですが、やり方がわかりません。 javascriptについて素人です。 jQUERYを使用して、phpのようにif文を追加したらいけるのかなと思って下記のようにやってみたのですが、更新しないと変わりませんでした。。 どなたかお力を貸して下さい!どうか宜しくお願い致します! ========================================== <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="robots" content="noindex,nofollow" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/admin/js/jquery-1.2.3.js" ></script> <script type="text/javascript"> $(function() { hogehoge = $("#abcdefg").val(); if(hogehoge !== '3'){ $('#hijklmn').hide(); } }); </script> </head> <body> <form method="post" action="/admin/~"> <select id="abcdefg"> <option value="1">aaaaaaaa</option> <option value="2">bbbbbbbb</option> <option value="3">cccccccc</option> </select> <div id="hijklmn"> 上のセレクトボックスが3の場合のみ、下記のフォームを表示させたい <input type="text" value="ああああああああ" /> </div> </form> </body> </html>

  • 隣のフレームへForm情報をまとめて送信する。

    みなさん、はじめして。 自分は以下のようなHTMLファイルを作成しています。 ---------------------------------------------- ファイル名 : call.htm <html> <head><title>call</title></head> <frameset cols="*,*"> <frame name="win01" src="src01.cgi"> <frame name="win02" src="src02.cgi"> </frameset> </html> ---------------------------------------------- :"src01.cgi"を実行した結果、表示されたHTML <html> <head><title>frameA</title></head> <ScriptLanguage = "JavaScript"> <!-- function load_frame(w) { if (w.d1.value!="" && w.d2.value!="" && w.d3.value="") w.submit(); } //--> </script> <body> <form name="data" method="POST" action="src02.cgi"> <input type="text" name="d1"> <input type="text" name="d2"> <input type="text" name="d3"> <input type="hidden name="d4" value="abc"> </form> </body> </html> ---------------------------------------------- :"src02.cgi"を実行した結果、表示されたHTML <html> <head><title>frameB</title></head> <body> xxxxxxxxxxxxxxxxx・・・ yyyyyyyyyyyyyyyyy・・・ zzzzzzzzzzzzzzzzz・・・ </body> </html> ------------------------------------------------ どこかしら下のuruchiさんの質問に似てますね... call.htmを実行した結果表示された左側のフレームにテキストボックス3つにデータを入力し、その結果を画面に右にあるフレームに反映させるにはどのようにしたら、よろしいのでしょうか?(Javascriptで????になっている部分はどのうように記述したらよろしいのでしょうか)

    • ベストアンサー
    • HTML
  • 左右に分かれているフレーム間での値の受け渡し

    こんにちは、はじめまして。 左右に分かれているフレーム(右にあるフレームを押下すると、左側のフォーム内の処理が走り、その結果(フラグなど)をサーバに送りたいです。 ソースは以下のようになっています。Javascriptで値の受け渡しをしたいのですが、どのようにすればsubmitができるかわかりません。どなたがご存知の方、よろしくお願いします。 ↓以下ソース↓ ~右側~ <form action="menu.php" method="post" name="form_menu"> <input type="button" value="test" onClick="push();">      省略 </form> <script language="javascript"> function push() {  --ここが分かりません-- ここで左側のフォームに送るフラグ値をセットして  それを左側のフォームにsubmitしたいです。 } </script> ~左側~ <form action="input.php" method="post" name="form_input">      省略 </form> ~フレーム~ <FRAMESET cols="80%,20%" frameborder="0"> <FRAME SRC="input.php" name="frame_input"> <FRAME SRC="menu.php" name="frame_menu"> </FRAMESET>

    • ベストアンサー
    • PHP

専門家に質問してみよう