iframe内のnameへ移動し、そこから更に移動する方法。

質問

すみません。色々過去の質問を読んでみたのですが、理解できないことが多いので、新たに質問させてください。

index.htmlでiframeを使用しています。
iframe内のＵＲＬをa.htmlとし、その中に<a name="top"></a>と作成しています。

理由はわかりませんが、a name="top"がテーブル内にあるとき、<iframe="a.html#top"></iframe>と指定しましても、テーブル内にジャンプしてくれません。一方、a name="top"をテーブルの外に出すとジャンプします。

以上を踏まえ、テーブルの外にあるtopへまず移動させ（iframe src="a.html#top"</iframe>）、そのあとtopから下へ50px、右へ100px移動させたいと思うのですが、可能でしょうか？
また、これ以外に簡単な方法はありませんか？

よろしくお願い致します。

回答No.2

pick52 · ベストアンサー

取り敢えず、アンカーを設置する場合のみにアンカータグを使わない
方がいいかもしれません。

あと、アンカーを設置するときはname属性ではなくid属性を使用する
ように推奨されています。
(name属性は非推奨)

ただし、id属性に対応していないブラウザのためにname属性も併記して
よいことになっており、本当に正確に書くなら併記するのがもっとも
好ましいようです。
(ただ、併記するとname属性とid属性の値が同じであるというエラーに
なるという問題が...)

アンカーを設置するなら

<span name="top" id="top"></span>

とした方がよいでしょう。
(本当は<span>と</span>の間が空なのは非推奨ですがこれは仕方ない
ところです)

テーブルに設置するなら

<table>
<tr>
<td name="top" id="top">このセルにアンカーを設置</td>
</tr>
</table>

こんな感じです。

因みに、アンカーリンクは回線の状況など(?)によって正常に動作
しないことがあるようです。

お礼

いろいろ詳しい情報有難うございます。

テーブルの中で
<td><a name="top"></a></td>
としていたのをアドバイス通り
<td name="top" id="top"></td>
としましたところ、希望通りのテーブル内の場所へ移動しました。

いつもアンカータグを使っていたのですが、今回はいい勉強になりました。

有難うございます。

回答No.3

神崎 渉瑠（@taloo）

> topから下へ50px、右へ100px移動させたいと思うのですが、可能でしょうか？
これだけが目的であれば、こんな感じのスタイルシートを書いてみてください。

<a name="top" style="position:relative;top:50px;left:100px;
display:block;visibility:hidden;width:1px;height:1px;overflow:hidden;">.</a>

display以降のスタイルは空白のアンカーが機能しないブラウザへの対策です。
<a>.</a>には半角スペースやピリオドなど、適当な文字を入れてください。

<a name="top" style="position:relative;top:50px;left:100px;"></a>
対策が不要なら、これだけでも良いかもしれません。

> 理由はわかりませんが、a name="top"がテーブル内にあるとき、<iframe="a.html#top"></iframe>と指定しましても、テーブル内にジャンプしてくれません。一方、a name="top"をテーブルの外に出すとジャンプします。
スタイルシートがなかった頃はテーブルで枠組みを作っていたので、それでスクロールすると思うのですが、
新しいブラウザでは既存のブラウザとは異なる動作をしたり、
ブラウザのバージョンアップによりその機能が変更、削除される可能性もあります。

以下を試してみてください。一案として。

・省略可能なタグもすべて記述し、td要素にidを指定し、<a>を消す（これで期待通りに動けば、推奨）
<table>
<tbody>
<tr>
<td id="top">
～
</td>
</tr>
</tbody>
</table>

・省略可能なタグもすべて記述し、<a>を使う
<table>
<tbody>
<tr><td><a name="top"></a>
～
</td></tr>
</tbody>
</table>

・a要素の中に半角スペースやピリオドなどを書いて、隠す。（<tbody>なども省略せずに書くことを推奨）
<table>
<tbody>
<tr><td>
<a name="top" style="position:absolute;visibility:hidden;"> </a>
～
</td></tr>
</tbody>
</table>

・<a>をテーブルの外に出し、表示位置を移動させる
<a name="top" style="略。上記参照"> </a>
<table>
略
</table>

以下余談。
HTML4.01とXHTML1.0の文法上で、name属性を使ってもよいタグは
form、input、textarea、button、select
frame、iframe、object、img、applet、
meta、map、a
のみです。

このうちアンカーのためのタグは a のみで、
それ以外の要素（タグ）をアンカーとして使う場合はidを使用してください。
ただし<input>などの埋め込みオブジェクトをアンカーとして使用できるかどうかは、ブラウザに大きく依存します。
<div id="">をアンカーとして利用できるブラウザも<input name="" id="">では利用できないものが多いです。
＊　<td id="">がアンカーとして機能するかどうかは不明です。

あくまで個人的な考えですが。
<div>
<a name="top"></a>
～
</div>
というパターンであれば、<a>をわざわざ入れなくても
<div id="top">
～
</div>
で済むはずですので、このように書き直せるなら、<a>を使わないことを推奨します。
（name属性を非推奨ではなく、<a>はもちろん、その代わりになりそうな<span>も<div>も入れることすべて非推奨）

<a>のname属性はNetscape-HTMLとJavaScript（ECMAScriptではなく）の名残なのかもしれません。
HTML5、XHTML1.1ではaのname属性は定義されていませんし、
ECMAScriptでもdocument.formsやdocument.anchorsなどのname属性を利用する記述を定義していません。

参考URL：

http://www.w3.org/TR/html4/index/attributes.html

お礼

非常に多岐に渡るアドバイス有難うございます。

<a name="top"> </a>は私のシステムではTable内で使用できないらしく<td name="top" id="top"></td>としたところ、Table内にジャンプしてくれました。

今後は<div id=""></div>や<td id=""></td>なども使って行きたいと思います。

この度は有難うございました。

回答No.1

fujillin

iframeのサイズを指定しているとすれば、表示したい位置が事前に特定できるでしょうから、いきなりそこまでスクロールさせてもよろしいかと・・
onload functionで
　window.scrollTo(x, y); や　window.scrollBy(x, y); を
利用すればできそうです。
（後者は相対スクロールなので、#指定からのスクロールでも使えるでしょう）
　http://www.tohoho-web.com/js/window.htm#scroll

ブラウザにレイアウトをまかせている部分があると、正確な位置の指定が難しくなりますね。

お礼

アドバイス有難うございます。

onload functionのwindow.scrollBy(x,y);はiframe中のa.htmlのheadに記述するのですね？

実は、a.htmlは別ページでも使用していまして、onload functionを設定してしまいますと、スクロールしたくないときにもスクロールしてしまうようです。
あくまでindex.htmlのiframe中でのみスクロールしたいんです。

有難うございます。