対処法：ChromiumベースのブラウザやIEでは iframe を含むページが先頭から表示されない場合がある。（iframe で開くページのURLに「#～」があると起こる）
【Chromeのバグ対策：URLに「#～」を付けずにscrollToを使って「id=～」までスクロールさせる】の続き。
【Chromeではiframeで表示するページをfragmentから表示すると親ページが先頭から表示せずにiframeの所から表示してしまう問題】の続きの続き。
2021/5/28 16:00頃
まず、Chromeだけの問題ではない、Firefoxでは起こらないが、Chromiumベースのブラウザ（Microsoft Edge、Opera）でも起こり、Internet Explore でも起こることが確認された。これまでの所、問題が起こらないのはFirefoxだけ。
・iframe を含むページが先頭から表示されない場合がある。（「#～」との関係）
バグ？を再現するソース。
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>
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>
Chromiumベースのブラウザでは、test3-0.htmlをリンクから開くと先頭からではなくiframeまでスクロールした状態で開いてしまう。これはiframeで開くページのURLに「#～」があると起こるらしい。ただし、ページ内に「#～」で指定した場所が無い場合は無視されて先頭から表示される。
対処用のソース。
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>
iframe タグに「sandbox=""」があると、iframeで開くページ（src）のURLが別のドメインにあるものとみなされるらしい。前々回に確認してあった通り、iframeで表示するページが別のサーバーにある場合はバグ？が再現されない。だから、「sandbox=""」で対処できる。ただし、sandbox を使うといろいろと制限されるので注意が必要である。sandbox属性 については、次のページが参考になりそう。
・<iframe>: インラインフレーム要素 - HTML: HyperText Markup Language | MDN
・HTML5/埋め込み/iframe要素 インラインフレーム内のコンテンツに制限をかける - TAG index
・＜iframe要素＞ - インラインフレーム | HTMLのタグリファレンス
・サンドボックスとは？その仕組みやメリットデメリットについて徹底解説
ところで、似た問題が、2006/10/13には起こっていたらしい。
・IFrame内部で名前付きリンク（アンカー）を使用すると勝手にスクロールする- HTML・CSS | 教えて!goo
載っているソースを基に作った再現ソース。
test3-2.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-2.html" name="test00" title="test00"></iframe>
</div>
<div style="height:1000px;">
<a href="test00-2.html#y100" target="test00">iframe内100pxへのリンク</a><br>
<a href="test00-2.html#y200" target="test00">iframe内200pxへのリンク</a><br>
</div>
</body>
</html>
test00-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframe内</title>
</head>
<body>
<p style="height:100px;">iframe内</p>
<p style="height:100px;" id="y100">iframe内100px</p>
<p style="height:100px;" id="y200">iframe内200px</p>
</body>
</html>
「iframe内100pxへのリンク」をクリックすると、test3-2.htmlもiframe内の「iframe内100px」までスクロールしちゃい、「iframe内200pxへのリンク」をクリックするとtest3-2.htmlもiframe内の「iframe内200px」までスクロールする。ChromeとMicrosoft Edgeでは起こるが、Firefoxでは起こらない。
追記：2021/5/28 17:40頃
test3-2.htmlにtest00-2.htmlを組み込んでiframeのバグ？と似た動作をさせるソース。
test3-2-00.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>バグ？</title>
</head>
<body>
<div style="height:200px;">
バナー、ヘッダなど。
</div>
<h4>↓↓↓偽iframe↓↓↓</h4>
<div style="border:1px solid gray;width:400px;height:250px;overflow-y:scroll;">
<p style="height:100px;">iframe内</p>
<p style="height:100px;" id="y100">偽iframe内100px</p>
<p style="height:100px;" id="y200">偽iframe内200px</p>
</div>
<div style="height:1000px;">
<a href="#y100">偽iframe内100pxへのリンク</a><br>
<a href="#y200">偽iframe内200pxへのリンク</a><br>
</div>
</body>
</html>
コメント
コメントを投稿