iframe を含むページが先頭から表示されない場合がある。（「#～」との関係）

Question

次のサイトがページの先頭から表示されません。

http://hitorinezumi.php.xdomain.jp/testpage/test3-0.html

（表示した後に再確認する場合は「このページへのリンク」をクリックします。）

Firefoxならページの先頭から表示されるのですが、Microsoft Edgeで確認すると先頭から表示されません。

この原因はサーバーにあるのでしょうか、それともMicrosoft Edgeの仕様でしょうか？

あるいは、ブラウザに限らず、先頭から表示されないのが仕様でしょうか？

先頭から表示してほしいtest3-0.htmlのソースは次の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>バグ？</title>
</head>
<body>
<div style="height:200px;">
バナー、ヘッダなど。
</div>
<div style="height:250px;">
<h4>↓↓↓iframe↓↓↓</h4>
<iframe src="test00-0.html#y500" id="test00" title="test00"></iframe>
</div>
<div style="height:1000px;">
<a href="test3-0.html">このページへのリンク</a>
</div>
</body>
</html>

iframe で表示しているtest00-0.htmlのソースは次の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframe内</title>
</head>
<body>
<p style="height:500px;">iframe内</p>
<p style="height:500px;" id="y500">iframe内500px</p>
</body>
</html>

Answer 1

Mac の Safariでの確認、ありがとうございました。

バグであれば改善される見込みがあったのですが、通常の動作だとしたらこのままなのでしょうね。

Webページを作る時に気をつけたいと思います。

Microsoft Edgeだけの問題ではなかったようなので、ここではこれで終了したいと思います。

Hebikuzureさん、近藤 茂さん、他のブラウザでの確認、ありがとうございました。m(_ _)m

Answer 2

お騒がせしました。

下記のようなソースにしたら、問題の現象が生じなくなりました。

違いは iframe タグに「sandbox=""」を追加したことです。

これによって、

「インラインフレーム内のコンテンツは、（同じドメイン内の文書であったとしても）別ドメインの文書として扱われ」るようです。（https://www.tagindex.com/html5/embed/iframe_sandbox.html）

実は、srcが別のドメインだった場合は問題の現象が発生しないことは確認していました。

srcが同じドメインだと質問の現象が発生する理由は不明のままですが、sandboxを追加することで別のドメインと扱わせることによって、質問の現象を無くすことができることが分かりました。

また、セキュリティ上、「sandbox=""」は付けておくべきだという情報も目にしましたので、その方向で検討したいと思います。

ただ、引き続き、iframe のsrcが同じドメインだった場合に、そのiframe を含むページまでスクロールしてしまう理由については、ご存知の方がいらっしゃいましたら、教えていただければ幸いです。

いまでは、それが正常な動作なのかもしれないと思うようになりました。

http://hitorinezumi.starfree.jp/test3-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>バグ？</title>
</head>
<body>
<div style="height:200px;">
バナー、ヘッダなど。
</div>
<div style="height:250px;">
<h4>↓↓↓iframe↓↓↓</h4>
<iframe src="test00-0.html#y500" id="test00" title="test00" sandbox=""></iframe>
</div>
<div style="height:1000px;">
<a href="test3-1.html">このページへのリンク</a>
</div>
</body>
</html>

Answer 3

Hebikuzure さん、書き込みありがとうございます。

いしい_ さん、こんにちは。
マイクロソフト コミュニティへの投稿ありがとうございます。

こちらの手元でも Microsoft Edge / Google Chrome / Internet Explorer でそれぞれ確認してみたのですが、同じく iframe の箇所が一番上になった状態でページが表示されました。

HTML ソースをコピーしてローカル上に保存したものを開くと、正常に <body> 直下の <div style="height:200px;"> の部分からの表示となりました。

ソースの記述を見る限りだと問題は無さそうなので、書かれているようにアップロードされているサーバー側に起因する問題なのかも知れないですね。

Answer 4

ChromeとOperaでの確認、ありがとうございました。

確認画像も添付してくださり、ありがとうございます。

これが正しい動作でないのなら、バグが放置されているのは異常なので、
もしかしたらXFREEのサーバーの問題かもしれないと疑っています。

Answer 5

Chrome でも Edge と同じ動作ですね。Opera も同じでした。

Chromium 全体の問題のようです。