htmlソースメモ

対処法：ChromiumベースのブラウザやIEでは iframe を含むページが先頭から表示されない場合がある。（iframe で開くページのURLに「#～」があると起こる） の続きのようなもの。 そもそもの発端 「 iframe を含むページが先頭から表示されない場合がある。（「#～」との関係） 」  そこ対処法でiframeにsandbox属性を追加することにしたが、iframeの中を切り替える必要が生じて、そのうちの一つがGoogleカレンダーで、Googleカレンダーを埋め込みたいが、sandbox属性が邪魔をする。 test3-1-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" name="test00" id="test00" title="test00" sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts"></iframe> </div> <div style="height:1000px;"> <a href="test3-1-0.html">このページへのリンク</a><br> iframe内切替<br> [<a href="test00-0.html#y500" t...

  【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 ...

  【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;" ...

 【iframeのsrcにページ内リンク（#～）があるとスマホで見た時に親ページの先頭ではなくiframeまでスクロールして表示される問題】 の続き。 test.html http://hitorinezumi.html.xdomain.jp/test.html <!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"の所は何...

 テストソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>予定表</title> <style> <!-- iframe{border: 0px none transparent; width:100%; height:100%; padding:0px; margin:0px;} #block_banner{height:200px;} #container{width:355px;height:405px;} --> </style> </head> <body> <div id="block_banner"> </div><!--バナー--> <div id="container"> <h4>予定表</h4> <iframe src="Schedule.html #Tuesday " id="Schedule" title="予定表"></iframe> </div> </body> </html> 暫定的なテストページ http://hitorinezumi.html.xdomain.jp/template/timetable/index0.html（削除済み）  iframeのsrcが上記のように「Schedule.html#Tuesday」とページ内リンク（#～）付きだとスマホでリンク先から飛んできた時に親ページの先頭から表示するのではなく、iframeの所までスクロールして表示されてしまう。まるで親ページのページ内リンクに飛んでいるかのよう。 確認したスマホの環境は次の通り。...