以下のサイトで『人力検索はてな』にて、いろいろお聞きして設置した簡単なサイト検索フォームがあります。
http://webmoney.secret.ne.jp/routemoney/
上記ページ上部の『簡単!お小遣いサイトサーチ』で各条件によりページが表示されるのですが、現在設定してあるのは、方法(パソコン)・カテゴリ(メール受信)・目的(現金)を条件のみです。
上記の条件で表示されるページの紹介サイトを『インラインフレーム+アンカータグ』にて自サイト内のページを表示しているのですが、そのページを読み込むとインラインフレームのタグを記述している場所まで自動的にスクロールしてしまいます。
スクロールしない良い方法はないでしょうか?
分かりづらくて申し訳ありませんが、宜しくお願いします。
mj99 さんのご指摘のとおり、IE では iframe 内のアンカーへの移動は
スクロールしてしまう問題が発生しますね。
iframe の中身を以下のように frameset を使った html にしても
親ページがスクロールしてしまいます。
<html>
<head>
<title>wakuwakumail</title>
</head>
<frameset cols="*">
<frame src="http://webmoney.secret.ne.jp/routemoney/mail/wakuwakumail.html#wakuwakumail">
</frameset>
</html>
iframe の src にはアンカーを含めないでおいて、
javascript で読み込み時に制御する方法も考えられますが、
iframe の onLoad はブラウザごとの対策が別に必要になって
複雑になってきます。
たどり着いた結論は、wakuwakumail.html などの表部分を
wakuwakumail_table.html として作成し、
wakuwakumail.html と kensaku01.html などでは
wakuwakumail_table.html を iframe で読み込むようにするというのが
最も確実な解決策ではないかということです。
いかがでしょうか。
私も何年か前に同じ問題に遭遇したことがあります。
たぶん、、完全な方法での対処はできないと思います。
IFRAME内のアンカーを指定して移動すると、
土台になっているページはIFRAMEが画面に見える位置まで自動でスクロールするようです。
ブラウザ(ie)の仕様なのでしょうか。
土台になっているページが、スクロールの無い1画面に収まるサイズであれば、この問題は発生しないことがわかっています。
----
問題となっているページ、
http://webmoney.secret.ne.jp/routemoney/kensaku/kensaku01.html
末尾に下記の行を追加してください。
<script>
alert("ちょっと待つ");
document.body.scrollTop=0;
</script>
ページ表示後にメッセージが表示されます。メッセージを閉じると、ページが先頭位置に移動するしかけです。
一見、うまくできてます。
これで、alertの行を削除すれば良いように思えますが、、、うまくいきません。
理由は、
アンカーへの移動はページ全体が完全に読み込まれた後で発動するからです。
つまり、
alertがあれば、メッセージを表示している間にページの読込みが完全に完了し、アンカーが移動したあとで、document.body.scrollTop=0が実行されるが、
alertを削除してしまうと、ページの読込み終わる前(iframeの内容が読み込まれる前)に、document.body.scrollTop=0が実行されてしまうのです。
ページ全体(iframeも含めて←これが重要)の読込みが完全に終わったことを知る方法があれば、解決できるかも。
----
たとえば、
setTimeout("document.body.scrollTop=0",3000)
などのように、ページが読み込み終わった頃(上記例では3秒後)にページを先頭に移動する方法もありますが、
iframeの読込みにどの程度時間が掛かるか確定できるものではないので、完全な方法ではありません。
ご連絡ありがとうございます。
私自身もいろいろ模索しましたが、やはり完全な解決方法は無いようですね。
インラインフレームを使用しない別の方法を考えてみます。ありがとうございました。
mj99 さんのご指摘のとおり、IE では iframe 内のアンカーへの移動は
スクロールしてしまう問題が発生しますね。
iframe の中身を以下のように frameset を使った html にしても
親ページがスクロールしてしまいます。
<html>
<head>
<title>wakuwakumail</title>
</head>
<frameset cols="*">
<frame src="http://webmoney.secret.ne.jp/routemoney/mail/wakuwakumail.html#wakuwakumail">
</frameset>
</html>
iframe の src にはアンカーを含めないでおいて、
javascript で読み込み時に制御する方法も考えられますが、
iframe の onLoad はブラウザごとの対策が別に必要になって
複雑になってきます。
たどり着いた結論は、wakuwakumail.html などの表部分を
wakuwakumail_table.html として作成し、
wakuwakumail.html と kensaku01.html などでは
wakuwakumail_table.html を iframe で読み込むようにするというのが
最も確実な解決策ではないかということです。
いかがでしょうか。
ご連絡ありがとうございます。
そうですよね!すこし考え方を変えれば上記のようにすればどちらにも対応できそうですね。
ありがとうございます。
ご連絡ありがとうございます。
そうですよね!すこし考え方を変えれば上記のようにすればどちらにも対応できそうですね。
ありがとうございます。