Chromeのバグ対策：URLに「#～」を付けずにscrollToを使って「id=～」までスクロールさせる
【Chromeではiframeで表示するページをfragmentから表示すると親ページが先頭から表示せずにiframeの所から表示してしまう問題】の続き。
2021/5/13 11:00頃
Chromeのバグを再現するソース
test3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Chromeのiframeのバグ？</title>
</head>
<body>
<div style="height:200px;">
バナー、ヘッダなど。
</div>
<div style="height:250px;">
<h4>↓↓↓iframe↓↓↓</h4>
<iframe src="test00.html#y500" id="test00" title="test00"></iframe>
</div>
<div style="height:1000px;">
<a href="test3.html">このページへのリンク</a>
</div>
</body>
</html>
test00.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>
Chromeでtest3.htmlをリンクから開くと先頭からではなくiframeまでスクロールした状態で開いてしまう。これはiframeで開くページのURLに「#～」があると起こるらしい。ただし、ページ内に「#～」で指定した場所が無い場合は無視されて先頭から表示される。
このバグに対処するには iframeで開くページのURLに「#～」を付けずに「#～」でスクロールさせたい場所までスクロールさせなければいけない。その方法として「id="～"」の要素がある場所の位置をgetBoundingClientRect()で取得して、scrollToでその位置までスクロールさせる。
対処用のソース
test3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Chromeのiframeのバグ？</title>
</head>
<body>
<div style="height:200px;">
バナー、ヘッダなど。
</div>
<div style="height:250px;">
<h4>↓↓↓iframe↓↓↓</h4>
<iframe src="test00.html?y500" id="test00" title="test00"></iframe>
</div>
<div style="height:1000px;">
<a href="test3.html">このページへのリンク</a>
</div>
</body>
</html>
test00.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframe内</title>
<script type="text/javascript">
<!--
function scrollToid(){
var id = location.search.slice(1);
var y0 = document.body.getBoundingClientRect().top;
var y1 = document.getElementById(id).getBoundingClientRect().top;
window.scrollTo(0,y1-y0);
}
-->
</script>
</head>
<body onload="scrollToid();">
<p style="height:500px;">iframe内</p>
<p style="height:500px;" id="y500">iframe内500px</p>
</body>
</html>
2021/5/28 16:00頃
続き→【対処法：ChromiumベースのブラウザやIEでは iframe を含むページが先頭から表示されない場合がある。（iframe で開くページのURLに「#～」があると起こる）】
コメント
コメントを投稿