インラインフレーム切り替え＆アンカーについて

インラインフレームを切り替える際、
iframeにnameを設定して、aタグにtargetで指定すれば切り替わる
ことまでは突き止めたのですが、
切り替えをしたい画像ボタンと、
iframeが離れているので、
まず、iframeがある部分までアンカーで飛び、
かつ、iframe内も同時に切り替える方法を知りたいのですが、
もしご存知の方がいらっしゃったらご教示いただければ幸いです。
よろしくお願いいたします。

No.1 回答者： noname#137826 回答日時： 2009/05/23 19:14

インラインフレームの id を "id1" として次のようにすればどうでしょう？

(クリックされるa要素)
<a id="id0" href="#id1"><img src="***"/></a>

(スクリプト)
window.onload = function() {
document.getElementById('id0').onclick = function() {
document.getElementById('id1').src = 'http://www.google.co.jp';
}
}

この回答へのお礼

ご回答ありがとうございますTT

お礼日時：2009/05/24 01:00

No.2 回答者： mtaka2 回答日時： 2009/05/23 19:37

HTMLレベルでは、「アンカーで飛ぶ」と「iframeの内容を切り替える」を同時に行うことはできません。

JavaScriptを使うしかないと思います。

リンクタグを <a href="iframeの移動先URL" target="iframeの名前" onclick="location.hash='#iframeのある位置へのアンカー名';">と指定すれば、
iframeの更新とアンカーへの移動が同時にできます。

…と書いている間に、回答1が書かれましたが、
どちらもJavaScriptを使うという方針は同じで、
回答1: HTMLでアンカーに飛び、JavaScriptでiframe更新
私の回答: HTMLでiframe更新、JavaScriptでアンカーに飛ぶ
という違いがあります。

JavaScriptを使用できなくしている環境での閲覧を考えると、
HTMLでの指定はiframe更新にしておいた方が無難かと思います。

この回答へのお礼

ご回答ありがとうございますTT

お礼日時：2009/05/24 01:00

No.3 ベストアンサー 回答者： grumpy_the_dwarf 回答日時： 2009/05/23 22:08

今ザッと確認した限りでは、javascriptなんかなくても

<a href="hoge.html#header" target="frame01">go</a>

みたいな書き方で、hoge.htmlの中にid="header"な要素があるだけ
でオッケーでしたけどね。

この回答へのお礼

ご回答ありがとうございますTT
なるほど！すごくシンプルだったんですね。。
親ページのアンカーで飛ばすことにとらわれていました。
iframe内にアンカーをせっていしていますので、そちらに飛ばしてみます！！

お礼日時：2009/05/24 01:02

No.4 回答者： mtaka2 回答日時： 2009/05/23 22:54

回答2の者です。

> 回答3

なるほど。
iframeの中のアンカーに飛ばすと、親ページの方も、iframeが見える位置にまでスクロールするんですね。
それなら、iframeの中に表示するページにダミーのアンカーを埋め込んでおけば、JavaScriptを使わなくても、
HTMLだけで問題なく表現できそうです。