インラインフレーム内から親HTMLのアンカーに移動

0   名前： KOKO ： 2006/08/16（水） 18:33  ID:cGizC/vN
アンカーポイントを埋め込んだHTML内に、インラインフレームでブラウザスクロール用のメニューHTMLを配置し、そのメニューからアンカーへスクロールたいのですがなかなかうまくいきません。
要は移動する処理を親ファイルで実行できれば済むと思うのですが、HTMLだけでは難しいようです。
JavaScriptで実現するものなのかどうかも解りかねるのですが如何でしょうか。

実は両ファイルともHTMLテンプレートを利用した掲示板CGIです。各スレッドにスクロールさせるメニューをフレーム内に配置するもので、インラインフレームが動作する環境であれば少しだけ使い勝手を向上させるためのものです。

メニュー側で<a href="URL#アンカー名" target="_parent"> と指定すれば移動できているのですがIEではもう一度読み込んでしまいます。CGIですのでキャッシュが効いていてもある程度もたついてしまいます。Safariではもくろみ通りページ内移動しますが、やはりIEで実現できないと、と感じています。

現時点でURLパラメータを使ったインラインフレーム内との連携は出来ておりますし、テンプレートHTMLも非常に柔軟性のあるものです。CGIにこだわられることなく、単純にHTML＋JavaScriptなどで実現できるようでしたら、その方法をご教授いただけると幸いです。
1   名前： 元帥 ： 2006/08/16（水） 18:33  ［URL］  ID:09V/9WPI
> IEではもう一度読み込んでしまいます。
これはIEの仕様かと思われます。

> CGIですのでキャッシュが効いていてもある程度もたついてしまいます。
そんな事はないと思いますが。
ブラウザの仕様か設定、又はサーバー側の設定によるものです。
「本当にキャッシュを有効利用しているならば」即座に表示が可能です。
# sage
どうも、IEってのは戻るボタンを押す度にページを再度読んでいる気がするのですが。

CGIを利用できる環境にあるのでしたら、iframeを使わずに、ページにメニューを設けてはどうでしょうか？
2   名前： KOKO ： 2006/08/16（水） 18:33  ID:cGizC/vN
元帥様　ありがとうございます。

>CGIを利用できる環境にあるのでしたら、iframeを使わずに、ページにメニューを設けてはどうでしょうか？
もっともなご意見なのですが、現在のCGIでは大工事になってしまいますのでHTML＋JavaScriptで処理できればと考えておりました。

クライアントに出来ないと言えば済む話ですので諦めようかと思います。
お騒がせいたしました。
3   名前： sevi- ： 2006/08/16（水） 18:33  ID:pKAWj1cb
<a href="URL#アンカー名" target="_parent">
を
<a href="#アンカー名" target="_parent">
に修正すればいいように見えるがどうか.

sevi-
4   名前： sevi- ： 2006/08/16（水） 18:33  ID:A5/hQl8Z
再投失礼する.
前述は適当すぎた.申し訳ない.
メニューに当たるページのHTMLを以下のようにすれば良いと考える.

動作内容を簡単に述べると、
文書読み込み完了後、文書内の全リンクを検索しその内、
・target属性値が_parentを差し、
・リンクの指すページ部のアドレスが親ウインドウのそれと同値であるもの
のみ、onclickイベントハンドラに処理を代入している.

代入した処理は、
・リンククリックイベント自体はキャンセルし、
・代わりに親ウインドウのlocationオブジェクトのhash値のみリンク自身が指すhash値に変更する
というものである.

これにより、読み込みは発生しない事を確認した。
むろん、親ページとは別のURLに存在するページを指している場合はそのままリンククリックイベント
を通過させ、ふつうにとばせている.


sevi-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
		<script type="text/javascript">
			function initialize_link()
			{
				var links = document.links;
				var link;
				for(var i=0; i<links.length; i++)
				{
					link = links[i];
					if(link.target != "_parent")
						continue;
					if(link.href.indexOf(parent.location.href)>0)
						continue;
					link.onclick = function()
					{
						parent.location.hash = this.hash;
						return false;
					};
				}
			}
		</script>
</head>
<body onload="initialize_link();">
	<a href="index.html#test" target="_parent">TEST1</a>
</body>
</html>
5   名前： sevi- ： 2006/08/16（水） 18:33  ID:A5/hQl8Z
追伸：
ソースの一部にミスがあったので再々投する.

if(link.href.indexOf(parent.location.href)>0)
を
if(link.href.indexOf(parent.location.href)<0)
に訂正.


sevi-
6   名前： KOKO ： 2006/08/16（水） 18:33  ID:cGizC/vN
_blank　様
ありがとうございます。

盆明けに試してみます！！
7   名前： KOKO ： 2006/08/16（水） 18:33  ID:cGizC/vN
できました！！
ありがとうございます。

それと、大変おこがましいのですがもう一つわがまま言わせてもらいます
href="index.html#test"
を
href="#test"
で行けるようにするのは可能でしょうか？

cgi側のパラメータの変更に対応するためなのですが。。。
ご教授いただいた方法ですと、パラメータ値までしっかりhref=で合っていないといけないので、今後パラメータ設定に変更を加えた場合にいろいろと修正が増えそうな感じです。
8   名前： sevi- ： 2006/08/16（水） 18:33  ID:PQukhZTw
メニュー側のリンクのhrefアドレスをhash値のみにするのは
メニューページ単体で見るとリンク先がメニュー文書自身を
指す事を意味し、文法的におかしくなるので勧められない.

よって代案として、コード内で確認する際、親のhref値から
hash値とsearch値を外したものを用意し、
それでチェックを行うように修正すれば良いと考える.

以下に上記を満たす修正後のコードを示す.

sevi-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
		<script type="text/javascript">
			function initialize_link()
			{
				var links = document.links;
				var link;
				var slocation_parent =
					parent.location.href.substr(
						0,
						parent.location.href.length - (parent.location.hash.length+parent.location.search.length)
						);
				for(var i=0; i<links.length; i++)
				{
					link = links[i];
					if(link.target != "_parent")
						continue;
					if(link.href.indexOf(slocation_parent)<0)
						continue;
					link.onclick = function()
					{
						parent.location.hash = this.hash;
						return false;
					};
				}
			}
		</script>
</head>
<body onload="initialize_link();">
	<a href="index.html#test" target="_parent">TEST1</a>
</body>
</html>
9   名前： KOKO ： 2006/08/16（水） 18:33  ID:cGizC/vN
早速の回答ありがとうございます。
パラメータを省いても問題なく動作できました。
唯一Safariでは「#」の後に「%23」が入ってしまい読込中のまま正常動作しないようですね。

Safariでの読込先の例
index.html#%23test

文字コードかなんかでしょうか。
ともあれSafariは無視できる範囲ですのでこれでよしとします。

本当にありがとうございました。
10   名前： KOKO ： 2006/08/16（水） 18:33  ID:cGizC/vN
追記
%23はどうやら「#」のようです。
なんなんでしょうSafariは・・リンク関係でこういうおかしな事が結構あります

ご報告まで
一覧へ戻る