Chromeではiframeで表示するページをfragmentから表示すると親ページが先頭から表示せずにiframeの所から表示してしまう問題
【iframeのsrcにページ内リンク（#～）があるとスマホで見た時に親ページの先頭ではなくiframeまでスクロールして表示される問題】の続き。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Chromeのiframeのバグ</title>
<style>
<!--
iframe{height:100%;}
#block_banner{height:200px;}
#container{width:300px;height:250px;display:inline-block;}
-->
</style>
</head>
<body>
<div id="block_banner">
バナー、ヘッダなど。
</div>
<div id="container">
<h4>↓↓↓iframe↓↓↓</h4>
<iframe src="YouTubeLive.html#top" id="Schedule" title="予定表"></iframe>
</div>
<div style="height:1000px;">
<a href="test.html">このページへのリンク</a>
</div>
</body>
</html>
"YouTubeLive.html#top"の所は何でも良い。iframeで表示するページに"#top"を付ければ再現できる。iframeで表示するページのソースに「id="top"」が無くても良い。
srcに「#～」が無くても同じ現象が見られる。
http://hitorinezumi.php.xdomain.jp/testpage/test1.html
このページはiframeで表示するSchedule3.htmlがJavascriptでfragmentの所から表示するようにしてある。
追記：2021/5/6 21:10頃
http://hitorinezumi.html.xdomain.jp/template/timetable/index3.html（削除済み）
このページのiframeで表示するページ（Schedule3.html）に記載されているJavascript。
<script type="text/javascript">
<!--
var date = new Date () ;
var year = date.getFullYear() ; // 年
var month = date.getMonth() + 1 ; // 月
var day = date.getDate() ; // 日
var hour = date.getHours() ; // 時
var hour0 = hour-1;
if(hour0 < 5){hour0=""}else{hour0=("00"+hour0).slice(-2)};
var minute = date.getMinutes() ; // 分
var second = date.getSeconds() ; // 秒
var dayOfWeek = date.getDay() ; // 曜日(数値)
var dayOfWeekStr = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ][dayOfWeek] ; // 曜日(英語表記)//
// var obj = document.getElementById('Schedule');
location.href = '#'+dayOfWeekStr+hour0;
// setTimeout(function(){location.href='#'+dayOfWeekStr+hour0}, 5000);
-->
</script>
「location.href = '#'+dayOfWeekStr+hour0;」を「setTimeout(function(){location.href='#'+dayOfWeekStr+hour0}, 5000);」にすると、５秒後に親ページ（index3.html）もiframeまでスクロールする。
追記：2021/5/6 23:20頃
シンプルなテスト用ソース。
test1.html
http://hitorinezumi.php.xdomain.jp/testpage/test1.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="test0.html" id="test0" title="test0"></iframe>
</div>
<div style="height:1000px;">
<a href="test1.html">このページへのリンク</a>
</div>
</body>
</html>
test0.html
↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframe内</title>
</head>
<body>
<p>iframe内</p>
<script type="text/javascript">
<!--
location.href = '#top';
-->
</script>
</body>
</html>
追記：2021/5/7 15:50頃
iframeで表示するページが別のサーバーにある場合は再現できないらしい。
test2.html
http://hitorinezumi.php.xdomain.jp/testpage/test2.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="http://hitorinezumi.html.xdomain.jp/test0.html" id="test0" title="test0"></iframe>
</div>
<div style="height:1000px;">
<a href="test2.html">このページへのリンク</a>
</div>
</body>
</html>
コメント
コメントを投稿