こんにちわ。
現在開発しているWEBページで、困っています。
まず、最初のページで、フレームが左右に分割しています。
左フレームAはリンクがたくさんはってあります。
右フレームBはトップロゴがあります。
右フレームBのロゴを押すと、右フレームはさらに上下に分割し、上フレームCはヘッダーとして使用し、下フレームDは詳細画面になっています。
左フレームAのリンクを押すと、下フレームDの内容が変わるのですが、フレームが4つ(A,B,C,D)に分割される前に左フレームAのリンクを押してしまうと、新しくブラウザが開かれてしまいます(Targetがないため)
そこで、URLを引数として、上下画面にフレーム分割をするソースに受け取った引数URLをフレームセットで実行できないかと考えました。
・・・がサンプルなどをひっくり返しても、なかなかできません。
どなたかご教授していただけるととても助かります。
よろしくお願いいたします。
No.1
- 回答日時:
答えになってないかも知れませんが、
Cookieを使えば宜しいかと…(^_^;l||)
トップロゴの表示の際、フレームが分割されてないとの情報をCookieに書き込めば、あとはフレームAからCookie参照で制御できると思いますが、いかがでしょうか?
No.2
- 回答日時:
・トップロゴを押す前に、左フレームのボタンは押せないようにする。
トップロゴ表示時には1フレームにして、左フレームのボタンも出さない。もしくは、出しておきたいのであれば(押せないのに出しても意味無いと思いますが)クッキーなどで制御。
・ダミーフレームをつくり、最初から4フレームで表示する。
ぐらいしか思いつきません。
No.3ベストアンサー
- 回答日時:
この方法でお気に召すでしょうか。
<!-- main.html -->
<html>
<frameset cols="20%,*">
<frame name="A" src="a.html" />
<frame name="B" src="b.html" />
</frameset>
</html>
<!-- a.html -->
<html>
<head>
<script language="JavaScript">
function func( ancObj ) {
// フレームBがなければ、とりあえず無視
if ( !parent )
return false;
if ( !(parent.B) )
return false;
// フレームBの中にフレームDがなければ、フレームBを更新。
// その際、フレームDの移り先も合わせて送信
if ( !(parent.B.D) ) {
parent.B.location.href="b.html?frameD=" + ancObj.href ;
return false;
}
// フレームDがあれば、ハイパーリンクでジャンプさせて良し
return true ;
}
</script>
</head>
<body>
<a href="http://www.yahoo.co.jp/" target="D"
onclick="return func(this)">Yahoo!</a><br />
<a href="http://www.google.com/" target="D"
onclick="return func(this)">Google</a><br />
</body>
</html>
<!-- b.html -->
<html>
<body>
<a href="b2.html">さらに分割</a>
</body>
</html>
<!-- b2.html -->
<html>
<script language="JavaScript">
function funcOnLoad( ) {
var searchs =""; // URLのパラメータ部分
var key = "" ; // 検索パラメータ
var keyHead = 0; // パラメータの先頭位置
var keyTail = 0; // パラメータ+値の終了位置
var urlOfFrameD = "" ; // フレームDのジャンプ先
// パラメータ文字列の取得
searchs = location.search;
if ( searchs.length == 0 )
return;
// frameDというパラメータ検索
key = "?frameD=" ;
keyHead = searchs.indexOf( key );
if ( keyHead < 0 ) {
key = "&frameD=" ;
keyHead = searchs.indexOf( key );
if ( keyHead < 0 )
return ;
}
// 値の終了位置を検索
keyTail = searchs.indexOf( keyHead + key.length, "&" );
if ( keyTail < 0 ) {
urlOfFrameD = searchs.substring(keyHead + key.length);
} else {
urlOfFrameD = searchs.substring(keyHead + key.length, keyTail);
}
if ( urlOfFrameD.length == 0 )
return ;
// ジャンプ
D.location.href = urlOfFrameD ;
}
</script>
<frameset rows="20%,*" onLoad="funcOnLoad( )">
<frame name="C" src="c.html" />
<frame name="D" src="d.html" />
</frameset>
</html>
ちょっと長いですが、順を追うと、まず、main.htmlを表示させます。main.htmlは、フレームで左右にa.htmlとb.htmlとに分割されてます。b.htmlはリンクがあり、選ぶとb2.htmlとなり、その中で上下にc.html、d.htmlとなります。
a.htmlには、リンクがあります。今回、onclick属性をつけて置き、returnします。<a>タグでは、onclickからtrueが戻るとhrefで指定したURLにジャンプします。falseが戻るとジャンプしません。
さて、リンクを押されると、親フレームとフレームBがいるか確認します。いない場合は、今回は何もしません。
次にフレームBにフレームDがいるか確認します。いれば、trueを戻してそのままジャンプさせます。
いない場合、まず、フレームBをC、Dに分割させるため、b2.htmlにジャンプします。この際、<a>タグのhrefで指定していたURLもframeDというパラメータとして渡します。フレームAでの作業はここまでです。この際、trueを戻すと別ウィンドウが開くと思うので、何もさせないためにfalseを戻します。
次に、C、Dと分割させられたフレームBですが、このとき、HTMLソースは、b2.htmlに切り替わります。<frameset>タグにonload属性があります。<frameset>や<body>にonload属性があると、そのhtmlの表示が完了した際に、その属性の内容が実行されます。
onload属性内では、まず、このページを表示するためのURLにパラメータがあるか確認します。これは、(windows.)location.searchを調べれば判ります。
次にパラメータにframeDが含まれているか確認にして、あれば、その値(文字列)だけを抽出します。
抽出が終われば、フレームDのURLを変更するだけです。
内容が込み入ってますが、alert()を挟むなどして、順番に追えば、理解出来ると思います。もし、この内容で大丈夫そうと思えたら、構築するシステムに合わせてカスタマイズしてみてください。
No.4
- 回答日時:
ANo.#3の回答したnisikitです。
ソースの訂正です。a.htmlの13行目あたりの
parent.B.location.href="b.html?frameD=" + ancObj.href ;
となっている箇所は、
parent.B.location.href="b2.html?frameD=" + ancObj.href ;
の誤りです。
誤)b.html -> 正)b2.html です。
思ったとおりに動作しました。
大変感謝しております。
ありがとうございました。
また、上記誤りは気づきました。
大丈夫です。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フレーム越しの背景色変換
-
LYCOS(WiseNut)のプレビュー機...
-
$という文字が使えない?
-
JavaScript、動作解説のおねがい!
-
<iframe>~</iframe>内のwindow...
-
jqueryを利用してインラインフ...
-
<a href="#" …>の意味を教えて...
-
javascriptとApacheの設定
-
カウントダウンとカウントアッ...
-
ブラウザをJavaScriptで最小化…
-
bodyにidをつける理由は何ですか?
-
Canvasを使って描画して面積取得
-
JavaScriptのエラー ( 関数の...
-
HTMLタグ 画面サイズを指定
-
CGIフォーム一定時間過ぎる...
-
外部JSでサブウィンドウを設定...
-
「関数が定義されていない」と...
-
text/JScript.EncodeはMacIE5で...
-
javascriptでjson読み込み
-
キーを押している間の時間を計...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
インラインフレームで表示され...
-
フレームを跨ぐドロップダウン...
-
エラー:書き込みができません ...
-
子フレームの自動リロードは可...
-
インラインフレームをドラッグ...
-
チェックボックスのチェックを...
-
onunloadイベントでの画面制御...
-
openerは使えないのでしょうか?
-
submitボタンで他のフレームを...
-
親フレームのURLによって、...
-
フレーム内のiframeのデータの...
-
HTMLフォームボタンによるター...
-
親フレームからkeydownイベント...
-
HTMLでサブフレームから親のス...
-
フレームでの右クリック禁止
-
別ページのインラインフレーム...
-
他のフレームのスクリプトを実...
-
Safariで<iframe>のinnerHTMLを...
-
<iframe>~</iframe>内のwindow...
おすすめ情報