- ベストアンサー
フレームを使用しているページで任意のコンテンツにリンクを張るには
フレームを使用して、左側:メニュー、右側:コンテンツという構成をとっているページで、右側のコンテンツに任意のコンテンツを表示させた状態でのリンクを張りたいと思っています。具体的にどのようにすればよいのでしょうか?
- naoyuki200x
- お礼率30% (4/13)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
通常のHTMLで実現するには無理ですが、CGIやJavaScriptを使えば可能でしょう。 勉強ついでにJavaScriptでのサンプルを作ってみました。 --index.html--- <frameset cols="10%,*"> <frame name="menu" src="menu.html"> <frame name="content" src="top.html"> </frameset> --top.html----- <html> <head> <script type="text/javascript"> <!-- var selfPath = new Array("top.html", "/test/top.html"); function isSelfPath(path){ for(var i = 0; i < selfPath.length; i++){ if(path == selfPath[i]){ return true; } } return false; } function loadContent(){ if(parent == null){ return null; } if(parent.location.search == ""){ return; } var query = unescape(parent.location.search.substring(1)); var params = query.split("&"); for(var i = 0; i < params.length; i++){ var key = params[i].split("=")[0]; var val = params[i].split("=")[1]; if(key == "page"){ if(!isSelfPath(val)){ window.open(val, "_self"); } return; } } } // --> </script> </head> <body onLoad="loadContent();" > </body> </html> こうするとhttp://hogehoge.com/test/?page=xxx.htmlなどのようにアクセスすると右側にxxx.htmlが読み込まれます。 環境に合わせていろいろ変えてください。 selfPathと言うのはtop.html自身を表すURIです(絶対パスと相対パスを指定してください)。これに入れておかないと自分自身を指定したときには何回もリロードされちゃいます（笑 ちなみにIEでの動作しか確認してません。
その他の回答 (1)
フレームのTOPページがあると思います。 つまり親フレーム。 このTOPが下のような感じになっていたら ------------------------------------------------ <html> <head> <title>フレームTOP</title> </head> <frameset cols="150,*"> <frame name="hidari" target="main" src="○○.html"> <frame name="migi" src="△△.html"> </frameset> </html> ----------------------------------------------- フレームの左には「○○.html」，右には「△△.html」が表示されていると思います。 左ページから右ページを替えたいときは， <p><a href="http://www.goo.ne.jp/" target="migi">リンク</a></p> みたいに書けばいいわけです。 普通 リンクのtargetは "_self" や，"_blank" をよく使いますが， ターゲットをTOPページで決めた frame name にすれば良いわけです。 そうだと思いますよ。日頃あまり意識しませんが。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ありがとうございます! 早速使わせていただきます。