人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLについて質問です。
以下のサイトで『人力検索はてな』にて、いろいろお聞きして設置した簡単なサイト検索フォームがあります。
http://webmoney.secret.ne.jp/routemoney/

上記ページ上部の『簡単!お小遣いサイトサーチ』で各条件によりページが表示されるのですが、現在設定してあるのは、方法(パソコン)・カテゴリ(メール受信)・目的(現金)を条件のみです。

上記の条件で表示されるページの紹介サイトを『インラインフレーム+アンカータグ』にて自サイト内のページを表示しているのですが、そのページを読み込むとインラインフレームのタグを記述している場所まで自動的にスクロールしてしまいます。

スクロールしない良い方法はないでしょうか?
分かりづらくて申し訳ありませんが、宜しくお願いします。


●質問者: quait
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:HTML お小遣い アンカー インラインフレーム カテゴリ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● mj99
●35ポイント

私も何年か前に同じ問題に遭遇したことがあります。

たぶん、、完全な方法での対処はできないと思います。


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の読込みにどの程度時間が掛かるか確定できるものではないので、完全な方法ではありません。

◎質問者からの返答

ご連絡ありがとうございます。

私自身もいろいろ模索しましたが、やはり完全な解決方法は無いようですね。

インラインフレームを使用しない別の方法を考えてみます。ありがとうございました。


2 ● yoo15x
●35ポイント ベストアンサー

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 で読み込むようにするというのが

最も確実な解決策ではないかということです。

いかがでしょうか。

◎質問者からの返答

ご連絡ありがとうございます。

そうですよね!すこし考え方を変えれば上記のようにすればどちらにも対応できそうですね。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ