• ベストアンサー

（JavaScript）次ページの複数フレームを同時更新

質問させてください 下記のような構造の 1.html と 2.html があるとします。 1.html：単体構造で2.htmlへのリンクがあります。 2.html：フレーム構造でB・Cのセットで構成されています。 実現したい事 ●1.htmlから2.htmlへのリンクを複数用意し、どのリンクをクリックしたかによってB.Cの参照先がそれぞれ変わる ●2.htmlが直接開かれた時(1.htmlを介さず)には2.html内に記述された参照先が読み込まれる 　1.html ┌───┐ │　　　 　│ │　Ａ　 　│ │　　　 　│ └───┘ 　2.html ┌───┐ │　Ｂ　 　│ ├───┤ │　Ｃ　 　│ └───┘ 条件 JavaScriptのみ、CGI等は使えない 1.htmlと2.htmlは通常のリンクであり、1.htmlと2.htmlが同時に開いている状態ではない事（親子関係ならば簡単に可能ですよね？） 何卒皆様のお力をお貸しくださいませ。 説明が下手なのでイメージがちゃんと伝わるか心配なのですが、不足な点がありましたらご指摘下さい、補足させて頂きます。 宜しくお願い致します。

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

  • ベストアンサー
  • grace2973
  • ベストアンサー率66% (16/24)
回答No.1

2.html を document.write を使って動的に作成する方法です。 まず、1.htmlの どのリンクから遷移してきたかを判断できるようにします。 ----- 1.html ----- <a href="2.html?1>リンク１</a><br> <a href="2.html?2>リンク２</a><br> ------------------ 2.html は、JavaScriptのみで作成します。 ----- 2.html ----- <html> <script langage="JavaScript"> <!-- 　var f1 = "21.html";　// Bのデフォルトの参照先 　var f2 = "22.html";　// Cのデフォルトの参照先 　if (location.search != "") {　// パラメータがある場合 　　if (location.search.substring(1) == "1") { 　　　// パラメータが 1 の場合は B に 23.html, C に 24.html を表示する 　　　f1 = "23.html"; 　　　f2 = "24.html"; 　　} else if (location.search.substring(1) == "2") { 　　　// パラメータが 2 の場合は B に 25.html, C に 26.html を表示する 　　　f1 = "25.html"; 　　　f2 = "26.html"; 　　} 　} 　// ここから HTML を動的に作成する 　document.open(); 　document.write("<html>\n"); 　document.write("<frameset rows='50%,50%'>\n"); 　document.write("<frame name='fra1' src='" + f1 + "'>\n"); 　document.write("<frame name='fra2' src='" + f2 + "'>\n"); 　document.write("</frameset>\n"); 　document.write("</html>\n"); 　document.close(); //--> </script> </html> ------------------ こんな感じでいかがでしょうか？

imasyu
質問者

お礼

完璧です。なんの問題もありません こんなにも簡単に実現可能だとは思いもよりませんでした。 次ページに対する値の送信は他の用途でも使えそうです。 ありがとうございました！！

その他の回答 (1)

  • Shinoa
  • ベストアンサー率92% (12/13)
回答No.2

すでに回答が出てしまいましたね。。。 でもせっかく作ったので、こんな感じでどうでしょう？ //2.htmlの内容。　 <html> <script language="javaScript"> 　 　　var TOP_URL = "blank";　　　　//　デフォルトで上フレームに表示するページ(blank.html) 　　var BOTTOM_URL = "blank";　　//　デフォルトで下フレームに表示するページ(blank.html) 　 　　a = location.search.split("&"); 　　if ( a.length == 2 ) { 　　　b = a[0].split("=") ; 　　　c = a[1].split("=") ; 　　　TOP_URL = b[1] ; 　　　BOTTOM_URL = c[1] ; 　　} 　document.write("<frameset rows=150,* >") ; 　document.write("<frame src=" + TOP_URL + ".html> ") ; 　document.write("<frame src=" + BOTTOM_URL + ".html> ") ; 　document.write("</frameset> ") ; </script> </html> 　 //　1.htmlのリンク部分。 <a href="2.html" >リンク１</a><br>　　　　　　　　　　デフォルトページが表示される。 <a href="2.html?a=xxx&b=yyy" >リンク２</a><br>　　　　上にxxx.html、下にyyy.htmlが表示される 少しでも参考になれば幸いです。

imasyu
質問者

お礼

とても参考になります。 CGIでは簡単にクエリストリングを次ページで変数として使えるのですがJavaScriptではこのようにsplitをつかって分解する必要があるのですね。 とにかく今回の問題もおかげさまで解決しましたが。 教えていただいたことは他の部分にも大いに使えるためとても感謝しています。 ありがとうございました！！

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

関連するQ&A

  • 複数フレーム同時リンクタグ

    　　　A ＝＝＝＝＝＝＝ 　　　B ＝＝＝＝＝＝＝ 　　　C フレーム分けしたhtml名→top.html と、縦３分割されたHPを作った際に Aのフレーム内のリンクを押した際にtarget設定でB とCのフレーム内を同時に変更する方法を探しています HPの構造上、BとC部分に１つの新しいフレームページを設けて そちらのフレームサイトへリンクをさせるという方法はできないです あとJAVAスクリプトを使用した <SCRIPT TYPE="text/javascript"> <!-- function jump(){ parent.B.location.href = "B.html"; parent.C.location.href = "C.html"; という方法でできるそうなのですが 以前自分では HTML言語の<a herfの派生のようなタグで これが実現できていました このタグを知りたいのですが以前のデータ消失＆検索してもなぜか引っかからずで困っております・・・ どなたか教えてください

  • フレームを使用して同時に二つのページを開くには？

    |＝＝＝＝＝＝＝＝＝＝| |・・・・Ａ・・・・・| |＝＝＝＝＝＝＝＝＝＝| ・・・|・・・・・・・| ・・・|・・・・・・・| ・Ｂ・|・・・Ｃ・・・| ・・・|・・・・・・・| ・・・|・・・・・・・| ・・・|・・・・・・・| ＝＝＝＝＝＝＝＝＝＝ このような３つHTMLのフレーム構造ページで BのリンクからA,C　二つのHTMLを同時に変えたいのですが、可能でしょうか？可能な場合、方法をわかりやすく教えていただけますでしょうか？

  • フレーム表示のページのリンク先を同ページ内に複数指定したいのですが・・・

    お世話になります。 質問の内容なのですが、 ホームページをフレーム表示でＡ，Ｂ，Ｃと3分割した場合に、 フレームＡのリンクの1つをターゲットフレームでフレームＢにリンクしたとします。 フレームＡからフレームＢにリンクしたリンクをクリックした時に、フレームＣの表示を違うＨＴＭＬに変えることはできないのでしょうか？ わかりずらくてすみません。 要は、フレームＡのリンク指定先をフレームＢとＣ 2つにすることは可能なのでしょうか？ またフレームＢにリンクしてあるフレームＡのリンクをクリックした時に、 フレームＣに貼ってある画像のみを変更するようなことはできるのでしょうか？ わかりずらくて申し訳ありませんが、よろしくお願い致します。

  • フレーム同時リンク後のブラウザ「戻る」ボタンについて

    はじめまして。 フレームページの構成が以下の場合において index.html...親フレーム a.html.......メニュー b.html.......サブメニュー c.html.......メイン a.htmlのリンクテキストをクリックすると b.html--->d.html c.html--->e.html 二つ同時にリンクできるjavascriptは、理解できたのですが、 この後、ブラウザの「戻るボタン」を押すと e.html--->c.html d.html--->b.html と２回ボタンを押さないと戻れません。１回の操作で済む ご教授をお願いします。 いろいろサイトを見ましたが力不足でわかりませんでした。

  • フレームページから別フレームのアンカーへ

    あるフレームAからフレームBへ移るとき、 同時に子ページのアンカーへもリンクのさせたいのですが、 検索しても「いくつか方法がある」という記述は発見できたものの、 そのものズバリ、Javascriptが記述されたページが見つからず、 途方に暮れています。 a.html（フレームA） 　a-1.html 　a-2.html b.html（フレームB） 　b-1.html 　b-2.html 　　#b-2a、#b-2b、#b-2c・・・ 上記のような場合なのですが、 単純に考えればb-2.htmlのそれぞれのアンカーを指定した フレームページをアンカーの数だけ作ればよいのですが、 アンカーが数百単位で存在し、 フレームBだけではなくフレームC、D、E・・・と フレーム自体も数が多いので、後々のメンテナンスを考えると Javascriptで行う方が良い気がしています。 どなたか解決方法をご存知でしょうか？

  • 他のページ内の複数のフレームに同時にリンクさせるには？

    フレーム分割されてないページから、フレーム分割されている他のページ内の複数のフレームに、それぞれURLを指定して同時にリンクさせるには？ HPを作っているのですが、どうしてもわからないことがあります。 フレーム分割の無い「サイトマップ」のページから、 フレーム分割されている他のページにリンクさせる際に、 リンク先ページの各フレームがそのリンク毎に変わるよう、別々に設定したいのです。 ＜例＞ Aページ（サイトマップ）内の”寿司”をクリックすると、フレーム分割されたBページの「LeftFrame」には”日本料理のページ”を、「RightFrame」には”寿司のページ”を表示させる。 Aページ（サイトマップ）内の”ピザ”をクリックすると、フレーム分割されたBページの「LeftFrame」には”イタリア料理のページ”を、「RightFrame」には”ピザのページ”を表示させる。 ↑ これを可能にする方法、タグなどがありましたら、どうかアドバイスをお願い致します！

  • ２つのフレームを同時に切り替えたいんですが・・

    はじめまして、質問させてください＞＜ フレームが３分割になっているwebページを、ホームページビルダーで作ろうとしています。 －－－－－－－－－ ｜　　　　　　　 Ａ　　　| ｜＿＿＿＿＿＿＿＿|　　　　　　　 ｜　　　　　　　 Ｂ　　　|　　　　　　 ｜＿＿＿＿＿＿＿＿|　　　　　　　　 ｜　　　　　　　 Ｃ　　　| －－－－－－－－－ こんなイメージです。 Ｃにmenuを入れて、そのＣの中のmenuにあるリンクを押すと、ＡとＢが同時に別のページに飛べるようにしたいんです。 もちろんＣはどのページに行っても固定です。 このJavaScriptが載っているサイトさんをいくつか参考にして何回も試してみたんですが、全くできませんＴＴ タグを何度も見直した上で、ビルダーのプレビュー画面で見るとそのたびに「ページを表示できません」と出てきてしまいます＞＜ 専門家の方やビルダーに詳しい方、どなたかアドバイスを下さい・・よろしくお願いします＞＜。。

  • フレーム内のページを単独で表示できないように

    今、PHPの初心者で勉強中です。 フレーム内のページを単独で表示できないようにする方法を知りたいです。 a.phpからb.php（b.phpでは左半分にc.php、右半分にd.phpを表示）にリンクしています。 ここでc.phpやd.phpをブラウザの「別タブ（ウィンドウ）で開く」で単独で開く事ができないようにしたいのですが、 Javascript以外の方法で何か無いでしょうか？ こういった形でのフレームの使用がよくない、と言うのは承知ですが、どうぞよろしくお願いします。

    • ベストアンサー
    • PHP
  • 一度のクリックで複数同時にリンクするには？？

    こんにちは。私は今ホームページビルダーで自分のホームページを作っています。ページをフレームで２分割していて、左のフレームを目次として使用しています。今はこの目次をクリックすると右側のフレームにリンク先が表示されるよう設定しているのですが、左フレームにjavascriptやマーキーを使用しているのでリンクと同時にこれらも再度動かしたいと思っています。リンク先を二つ設定したり、リンクと同時に左フレームを再度読み込ませるなど…はできるのでしょうか？ 質問の仕方が下手ですいません。お力添えお願いしますm(_ _)m

  • 同時に更新(リロード)について。

    こんばんは。非常に悩んで困っています。 (参考図) 　　　　　　　┌→上フレーム（A.php） 　　　　　　　│ 　　　　　　　│ aaa.php―┼→中フレーム（B.php） 　　　　　　　│ 　　　　　　　│ 　　　　　　　└→下フレーム（C.php） A.php ページ内のボタン【B】をクリックしたら、中フレームで B.php ページが表示される仕組みで・・・ その時、同時に下フレームの C.php ページにも更新(リロード)を掛けるような仕組はどうやったら良いのでしょうか？ 【参考】 ・　Javascript は利用せず。(利用したくない) ・　上記の参考図の表示がずれていたら脳内変換で宜しくお願いします。 ・　ページはフレームを使用し、上フレーム・中フレーム・下フレームと縦に組んでいます。 ・ A.php ページ内のボタンは、次の様にリスト形式でリンク文字としてます。 　　<ul> 　　<li><a href="B.php" target="B">B</a></li> 　　</ul> 中途半端な知識で対応できず、苦しんでおります。 ちなみに、私は「PHP」の経験が浅いので、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か、どうか教えて下さい。宜しくお願いします。

    • 締切済み
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する