WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:フレーム内のラベルへのリンク

0:[投稿] みどり [MAIL] [URL] [2002/11/07 14:46 ][環境:WIN+IE ASP]

フレーム使用していないページから、フレームを表示した状態でラベル部分へリンクするにはどうやって書けばいいのでしょう?
「フレームを指定しているページ#ラベル名」 だとラベル部分へは飛べないし、 
「フレーム内部のページ#ラベル名」 だとフレームが表示されません。

どなたかご教授おねがいします。


1:[回答] 薫 [2002/11/07 15:29 ]

javascriptでできそうですね。

フレームを構成しているHTMLのURLに、「フレームを指定しているページ#ラベル名」を
引数として持っていき、indexで加工する、と。
ちょっと説明が解りにくそうですね(^_^;

【例】
▼リンクをこんな感じに。
<a href="#" onclick=direct('next.html#01');>LINK</a>

▼directの動作
function direct(url){
//フレームを指定しているページ
index = 'frameindex.html';
location.href= index+"?"+url;
}

▼frameindex.html のあたま
//デフォルトで表示されるHTML
def = 'index.html';
leftmenu = 'framemenu.html';

url = window.location.search;
seed = url.slice(1,url.length);

if(!seed){ seed = def; };
if(seed==leftmenu){ seed = def; };

document.writeln("<frameset cols=150,*>");
document.writeln("<frame name=menu src=" + leftmenu + ">");
document.writeln("<frame name=body src=" + seed + ">");
document.writeln("</frameset>");

フレームへの直リンクに対処したものの応用なので、
動作未確認です。。。
適当に加工してみてください。


2:[質問] みどり [MAIL] [URL] [2002/11/08 15:49 ]

回答ありがとうございました。

javascriptですか・・・。
少ししかやったことがないのでもう少しお付き合いいただけるとうれしいです。

function directはどこに書けばいいのですか?

あと、リンク部分の
('next.html#01')はフレーム内のページを指定するのでしょうか?#がラベルだというのはわかります。

ほんと、初心者なので一日がんばってもできていません・・・。
よろしくお願いいたします。


3:[回答] 薫 [2002/11/08 16:32 ]

> function directはどこに書けばいいのですか?
JAVASCRIPT(以下JS)は基本、<HEAD>〜</HEAD>内に記述します。
記述形式は覚えておくといいですよ。

> あと、リンク部分の
> ('next.html#01')はフレーム内のページを指定するのでしょうか?
そうです。
<A NAME="01"></A>の書いてあるファイルになります。


リンク元のHTML:top.html
フレームを作っているHTML:frameindex.html
フレームの右側:nemu.htrml
フレームの左側:next.html(ここに#01がある)

この前提で、下記のように記述します。

【top.html】
<HEAD>〜</HEAD>内に
//ここから------------------------------
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--//
function direct(url){
//フレームを指定しているページ
index = 'frameindex.html';
location.href= index+"?"+url;
}
//-->
</SCRIPT>
//ここまで------------------------------

<BODY>内で...
<a href="#" onclick=direct('next.html#01');>LINK</a>


## 解説すると...
1.リンクをクリックすると、onclick=direct('next.html#01') で、
行きたい所「next.html#01」(値)をJSのdirectという関数に渡します。

2.function direct(url) { }では、渡された「next.html#01」を「url」という
入れ物(変数)にいれて処理を行います。

3.ここでは「index = 'frameindex.html';」という定義づけがされています。
フレームを作っているHTMLを、「index 」という入れ物(変数)に入れています。

4.最後にlocationでリンク先へ飛びます。
「index+"?"+url」は、入れ物の中身(変数の値)と文字をつなげているので、
この時のリンク先は、「frameindex.html?next.html#01」となります。
掲示板や検索サイトで見かける、あの(どの?)イメージです。

いったん終了。


4:[質問] みどり [MAIL] [URL] [2002/11/08 17:00 ]

ありがとうございます。
ソレらしき動きはするようになりました。

フレームページへはジャンプできるようになりましたが、
#01のところへは行くことができません。
確かにアドレスバーにも「frameindex.html?next.html#01」と
表示されているのに・・・。

もうちょっとがんばってみます。


5:[回答] 薫 [2002/11/08 17:40 ]

すみません、前提条件が1つ記述ミスでした。
フレームの右側:menu.html です(汗

【frameindex.html】
<HEAD>〜</HEAD>内に
//ここから------------------------------
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--//
//デフォルトで表示されるHTML
def = 'index.html';
leftmenu = 'framemenu.html';

url = window.location.search;
seed = url.slice(1,url.length);
if(!seed){ seed = def; };

document.writeln("<frameset cols=150,*>");
document.writeln("<frame name=menu src=" + leftmenu + ">");
document.writeln("<frame name=body src=" + seed + ">");
document.writeln("</frameset>");
//-->
</SCRIPT>
//ここまで------------------------------


## 解説すると...
普段、普通に記述している<frameset>を、JSで書き込むようにしています。

「url = window.location.search;」では、今のURLの「?」以降を持ってきて
urlという変数に代入しています。
この場合、「?next.html#01」となります。
でも「?」はいらないので、「seed = url.slice(1,url.length);」で
1文字削ります。

「if(!seed){ seed = def; };」は、もしもJSを通ってこなかった場合
(=URLに?以降がなかった場合)に表示するHTMLを指定します。
ここでは最初に「def = 'index.html';」が定義づけされているので、
左側はindex.htmlが表示されることになります。

あとは文字と変数をくっつけて書き出しています。
先ほどのlocationと同じような動作です。(というと語弊がありますが)

>フレームページへはジャンプできるようになりましたが、
>#01のところへは行くことができません。
とありますが、
1.フレームに行きnext.htmlには行くが#01には行かない
2.index.htmlに行く
3.その他

どんな感じでしょうか?


6:[回答] みどり [MAIL] [URL] [2002/11/08 17:50 ]

丁寧な、そしてすばやい回答、ありがとうございます。

1の状態です。


7:[回答] ひよこ [URL] [2002/11/09 05:27 ]

既出のやつかな?
http://www.ybi.co.jp/koike/qa100/qa312.htm
サンプルはここに置いてます。
http://members.jcom.home.ne.jp/1633348312/
ページ内リンクの"#"は一度他のに変換しないと旨くいかないようです。


8:[完了] みどり [MAIL] [URL] [2002/11/12 11:12 ]

できました。ありがとうございました。

リンクしたいフレームページは複数あったので、ひよこさんの方法のほうが合っているようです。

>ページ内リンクの"#"は一度他のに変換しないと旨くいかないようです。
たしかにそのとおりでした。

薫さん、ひよこさん、ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World