iframeでの移動

このQ&Aのポイント
  • iframeを使用して3段階に分けたページを作成しました。
  • 各ページの名前はue、naka、sitaです。
  • nakaでの編集・閲覧後にueにフォーカスを持っていく方法について教えてください。
回答を見る
  • ベストアンサー

iframeでの移動

iframeで3段の分けたページを作りました。名前は(ue,naka,sita)としました。 ueでいろいろ入力し、nakaで入力したものを閲覧・訂正をし、sitaでページ移動のメニューを作っています。 nakaで閲覧したものを編集する画面を作ったのですが、編集後にueに戻ってほしいと考えています。 autofocusを使っているので、上画面に移動すれば希望のinputタグにフォーカスするのですが、うまく動きません。 「body onload='movebarcord;'」で読み込んでからjavascriptを動かそうとしていますが、無反応です。 <script> function movebarcord { // top.frames.ue.document.forms.touroku.barcord.focus(); // parent.frames[0].document.forms[touroku].barcord.focus(); // top.ue.document.forms[0].focus(); document.activeElement.blur(); } </script> それぞれの行を試してみましたが、どれも動いている気がしないのです。どうすればnakaで編集・閲覧をした後に、ueにフォーカスを持っていけるのか、お教えください。

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

  • ベストアンサー
  • dell_OK
  • ベストアンサー率13% (740/5646)
回答No.1

試してみると、1行目の方法で移動はできました。 top.frames.ue.document.forms.touroku.barcord.focus(); ただ、私の環境では、次の行でエラーになってました。 function movebarcord { これに括弧をつけて、次のようにすると実行できました。 function movebarcord() { JavaScriptのどこかに問題があるとしたらブラウザの開発ツールを使って確認されるといいと思います。

y_usijima
質問者

お礼

コメントと環境を作ってまでの確認に感謝します。 残念ながら、私のところでは動作しませんでしたが、動作確認済みのソースが手に入ったのでいったん終わらせます。 何しろ、デバッガーというものを使ったことが無くこれ以上の原因究明が私にはできないので「何が悪い」という回答が出せません。とりあえずデバッガーを勉強してからやってみたいと思います。 ありがとうございました。

関連するQ&A

  • 上下三分割のフレームで、一番下の部分が表示されない

    上下三分割されるフレームページを作ってるのですが、一番下の部分がどうしても表示されなくて困っています。 これがタグなのですが、おかしい部分はありますでしょうか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <title></title> <Meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <!--検索避けタグ--> <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"> <META NAME="ROBOTS" CONTENT="NONE"> <!--終わり--> </head> <frameset rows="50,*,50" FRAMEBORDER=no> <frame name="ue" src="ue.html" scrolling="no" noresize> <frame name="naka" src="naka.html" scrolling="auto" noresize> <freme name="sita" src="sita.html" scrolling="no" noresize> <noframes> <body> <p> </p> </noframes> </frameset> </body> </html> ueとnakaは表示されるのですが、sitaが表示されないのです。 sitaのみだとちゃんと表示されるので、多分この中に誤りがあると思うのですが… 因みに相対パスはあっています。 ご回答宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • プルダウンから移動時のフレームの外し方

    こんにちわ。 今、上にプルダウンメニューがあり、下にリンク先ファイルを 表示する、上下のフレームページを作ってます。 この時、TOPページ(フレーム無し)やレンタルBBSの ページにも行けるようにしたいのですが、 上のフレームが残ってしまい、困ってます。 アドレスを記入する場所に target="top" と付け加えてみたけれど 上のフレームは残ったままです。 サンプルのscriptで【top.sita.location.href 】と 指定してるから、下のフレームにしか対応しないのでしょうか? 何処かを変更して、TOPやBBSに移動する時だけ フレームを無くし、全画面表示する方法はないでしょうか? ご存知の方、いらっしゃいましたら宜しくお願いしますm(__)m <SCRIPT language="JavaScript"> <!-- function myGo(){mySelect = document.myForm.myMenu.selectedIndex; top.sita.location.href = document.myForm.myMenu.options[mySelect].value; }// --></SCRIPT> <select name="myMenu"> <OPTION value="http://www.***">TOP <OPTION value="http://www.***">うさぎ <OPTION value="http://www.***">ねこ <OPTION value="http://www.***" target="top">BBS                     ↑ココに入れました </select> <input type="button" value="GO!" onClick="myGo()"> </form>

  • PHPにiframeでニュースを表示

    PHPを利用したショッピングカートのトップにニュースを掲載しようとしています。 ニュースはCGIで管理しています。 高さを自動調整するJavaScriptを組んでみたのですが、ページを開いた時1行分しか表示せず、リロードすると自動サイズではなく"iframeで設定したサイズ"になってしまいます。 <script language="JavaScript"> <!-- function GetHeight(Y,NAME) { var app = navigator.appName.charAt(0); if(navigator.userAgent.indexOf('Safari') != -1){ document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80; }else if (app == "N") { document.getElementById(Y).height = parent.frames[NAME].document.height +80; } else { document.getElementById(Y).height = parent.frames[NAME].document.body.scrollHeight + 80; } } // --> </script> <iframe src="./info.cgi?mode=contents2&cont=JP" onload="GetHeight(this.id,this.name)" id="Z" name="newZ" height="500"「←このサイズになる」 width="100%" frameborder="0" marginheight="0" marginwidth="0"> </iframe> これは何が悪いのでしょうか? もしかして、文字コードが関係していますか? PHPはEUC-JP、iframe先はShift_JISです。

    • 締切済み
    • PHP
  • リンクのターゲットの仕方について

    index.htmlと同じフォルダに上(ue.html)下(sita.html)に2分割されたフレームページ(top.html)があります。 これは、上のボタンから下にページが表示されるように『target=sita』で設定し、ちゃんと表示できます。 index.htmlのあるフォルダに新たにフォルダ(TRIP)を作り、上(../ue.html)と左(phidari.html)右(pmigi.html)に分かれた3分割のフレームページ(p.html)を新たに作成します。 これは、左のボタンからから右に『target=migi』で、ちゃんと表示されます。 次に、上のボタンから下に左右に分かれた3分割のフレームページ(p.html)を、元通り2分割のフレームページ(top.html)に戻したいのですが、『target=sita』では、別の窓が開いてしまい、下に表示されません。 どうしたら、3分割のフレームページを2分割のフレームページに戻すことが出来るんでしょうか? まだまだHP作成初心者ですので、質問に分かりにくい部分があると思いますが、教えていただけると嬉しいです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • designModeをOnにしたインラインフレームに入力した文字を取得

    Webページ上にインラインフレームを定義して、その中身のdesignModeをOnにして、インラインフレームのBODYを編集できるようにしています。 JavaScriptで編集したBODYの中身の文字列を取り出したいのですが、方法が分かりません。アドバイスをお願いします。 ソースは↓のような感じにしています。 ----- <html> <body> <iframe src="" id="edit" width="200" height="200"></iframe> <script language=JavaScript> <!-- frames[0].document.designMode = "On"; // --> </script> <br> <input type="button" onclick="JavaScript:DispEdit();" value="中身表示"> <script language=JavaScript> <!-- function DispEdit() { //alert(frames[0].document.body.text); //ここで編集したiframeの中身を取り出したい! } --> </script> </body> </html> -----

  • javascriptでのフォーム自動入力について質問です。

    javascriptでのフォーム自動入力について質問です。 プログラム超初心者ですがよろしくお願いします。 ブックマークレットを使ってフォームの自動入力をしたいと思っているのですが、 まず、新規(別)のページから自動入力したいURLに移動して、読み込みが完了したら IDとPASWSWORDを自動入力したいと思っています。 自動入力したいURLを手動で表示してからだと以下のスクリプトでうまくいったのですが・・ javascript:(function (){document.forms[0].CRSRED.value='ID';document.forms[0].CRSBLU.value='PASSWORD';document.forms[0].submit();})(); スクリプトの中にURLを記述して自動でページ移動してから入力する方法がわかりませんでした。 良い方法がありましたら教えていただきたいです。よろしくお願いいたします。 移動したいページは下のページです。 https://contents.nifty.com/member/service/g-way/meijinsen_month/pay/index.html

  • ラジオボタンを複数選択して、リンクへ飛ぶ

    初心者です。これだと、二つのネームしか選択できないのですが、三つ、四つにに増やすにはどうしたらいいのでしょうか? <script language="javascript"><!-- //リンク先の設定(URL) al=new Array(); al[0]="http://yahoo.co.jp/";//A+D al[1]="http://google.co.jp/";//A+E al[2]="http://www.goo.ne.jp/";//A+F al[3]="";//A+G al[4]="";//B+D //(略) al[11]="";//C+G(※この場合は0~11の値が入ります) function xLunch(){ aUe = document.getElementsByName("ue"); aSita =document.getElementsByName("sita"); for(i=0;i<aUe.length;i++){ if(document.getElementsByName("ue")[i].checked==true){ nUeSel=i; break; } } for(i=0;i<aSita.length;i++){ if(document.getElementsByName("Sita")[i].checked==true){ nSitaSel=i+1; break; } } nC = (aSita.length*nUeSel)+nSitaSel; location.href=al[nC-1]; } --> </script> <table border="1"> <tbody> <tr> <td>一つ目を選択してください。</td> </tr> <tr> <td><input type="radio" name="ue" checked>A <input type="radio" name="ue">B <input type="radio" name="ue">C</td> </tr> <tr> <td>二つ目を選択してください。</td> </tr> <tr> <td><input type="radio" name="sita" checked>D <input type="radio" name="sita">E <input type="radio" name="sita">F <input type="radio" name="sita">G </td> </tr> <tr> <td align="right"><input type="button" value=" OK " onclick="xLunch()"></td> </tr> </tbody> </table>

  • フォーカス移動抑止について

    お世話になっております。 ブラウザの画面項目(テキストボックス等)間でフォーカスを移動する場合、移動元でonblur、移動先でonfocusが発生しますが、移動元のonblurで、特定の条件の場合だけフォーカス移動を抑止し、移動先onfocusを発生させないようにしたいのですが、何か方法はないでしょうか? 【環境】 ・IE6 【現在うまくいっていない方法】 現在、フォーカス移動を抑止するため、移動元のonblur内の処理で、「event.srcElement.focus()」を実行してますが、移動先のonfocus()も走ってしまう。(2回フォーカス移動することで元の画面項目にフォーカスが戻る) 【補足】 ・問題になっているのは、画面項目のonblur、onfocusで入力値のチェックや他画面項目との連動、色変更、エラーメッセージ表示等を行っておりonblurやonfocusが何度も走ってしまうと想定外の動きをしてしまいます。(場合によってはフォーカス移動の無限ループ) ・グローバル変数を屈指すれば想定外の動きをしないようにすることはできるかと思いますが、それ以外の方法で制御したい。 【現在うまくいっていない方法の動作確認用のとりあえず作ったサンプルプログラム】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>フォーカス遷移抑止検証</title> <script type="text/javascript"> var iEventCount = 0; function onElemBlur() { if (++iEventCount > 10) return true;// 無限ループ抑止用 debug("blur : " + event.srcElement.value); event.srcElement.focus(); } function onElemFocus() { if (++iEventCount > 10) return true;// 無限ループ抑止用 debug("focus : " + event.srcElement.value); } function debug(msg) { var obElem = document.getElementById("debugmsg"); obElem.innerHTML += msg + "<br/>"; } </script> </head> <body> <input type="text" value="hoge1" onblur="onElemBlur()" onfocus="onElemFocus()" /> <br/> <input type="text" value="hoge2" onblur="onElemBlur()" onfocus="onElemFocus()" /> <br/> <br/> <br/> <span id="debugmsg" rows="10" cols="50" ></span> <br/> </body> </html> 長々と申し訳ありません。 よろしくお願いいたします。

  • テキストエリアをenterキーでフォーカス移動したい

    複数あるテキストエリア間を、enterキーでフォーカス移動をしたいです。 以下のようにしましたが、2つめのテキストエリアへフォーカス移動すると、改行が入力され、カーソルが2行目へ移動してしまいます。 enterキーを押しているのでこうなってしまうと思うのですが、 カーソルが1行目へ移動するようにするには、どうしたらいいでしょうか? フォーカス移動後に改行コードがあったら、""にreplaceする・・等、試してみたのですが、なかなか上手くいきません。 どなたかお分かりになる方がいらっしゃったら、教えてください。 <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function FirstFocus() { document.forms.F1.elements[0].focus(); } function nextFocus(n) { if (event.keyCode == 13) { for (var i = 0, f = n.form.elements; i < f.length; i++) { if (f[i] == n) { (f[i + 1] || f[0]).focus(); } } } } //--> </SCRIPT> </HEAD> <BODY onload="FirstFocus()"> <FORM name="F1"> <TEXTAREA name="T1" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T2" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T3" rows="5" cols="30"></TEXTAREA><BR> </FORM> </BODY> </HTML>

  • textbox内の文字数を判別しfocusを移動させる

    textbox内の文字数を判別しfocusを移動させるプログラムを書いたのですが、2つ目のtextboxから記入したりするとうまく動作しません。どうしたらいいのでしょうか?カーソルがどのtextboxにあるか(どのtextboxにfocusしているか)を参照しようとしたのですがそのような関数はあるのでしょうか?教えてください。 <html> <head><title>checkLength</title> <script language="JavaScript"> <!-- document.onkeyup=checkLength; function checkLength() { if(document.form1.text1.value.length==3) document.form1.text2.focus(); if(document.form1.text2.value.length==5) document.form1.text3.focus(); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1">半角英数で入力してください。<br> 1...<input type="text" name="text1" size="7"> 3文字入力するとカーソル移動<br> 2...<input type="text" name="text2" size="7"> 5文字入力するとカーソル移動<br> 3...<input type="text" name="text3" size="7"> </form> </body> </html>

専門家に質問してみよう