htmlソースメモ

投稿

ラベル（iframe）が付いた投稿を表示しています

onloadでiframeに追加したsandbox属性が無視される。

10/17/2023 05:40:00 午後

対処法：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...

対処法：ChromiumベースのブラウザやIEでは iframe を含むページが先頭から表示されない場合がある。（iframe で開くページのURLに「#～」があると起こる）

5/28/2021 05:14:00 午後

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

iframeの中のボタンで包括ブロックを先頭に戻す

5/10/2021 05:25:00 午後

2021/5/10 17:20頃先頭に戻るためのリンクは「<a href="#top">戻る</a>」が便利。ただ、そのリンクがiframeの中にあるとiframeの中が先頭に戻るだけで、親ブロックは先頭に戻らない。「<a href="#top" target="_top">戻る</a>」「<a href="#top" target="_parent">戻る</a>」にすると、 iframeに表示していたページが親ブロックに表示されてしまう。これまでは対処法として次のようにしていた。 <a href="javascript:location.href=location.href;" title="戻る" target="_top">戻る</a> ページの先頭に戻すボタンをiframe内に設置するには次のようなJavascriptを使えば良い。ついでに親ブロックからiframe内を先頭に戻すボタンも用意した。親（test_out.html）のソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>iframe内</title> <script type="text/javascript">  ...

プルダウンメニューをiframeの中に入れるのを諦めて、Javascriptでiframeからプルダウンメニューを取り出してdivの中に貼り付ける

5/08/2021 04:38:00 午後

【プルダウンメニューをiframeの中に入れる試行錯誤その２】の続き。 2021/5/8 16:30頃基本形 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>テスト</title> <style>  </style> </head> <body> <div class="block_menu"> <iframe src="menu.html" class="menu" title="メニュー"></iframe> </div> <div class="container"> <div class="contents"> <span class="text01"><a href="">１１１１</...

Chromeではiframeで表示するページをfragmentから表示すると親ページが先頭から表示せずにiframeの所から表示してしまう問題

5/06/2021 07:57:00 午後

【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>  </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"の所は何...

height:100% は包含ブロックと同じheightだから包含ブロックには overflow-y:hidden が必要

5/06/2021 02:43:00 午後

"パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます" height - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/height 次のようなHMLソースで「フッタなど」が上のブロックに重なってしまった。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>height:100%の注意</title> </head> <body> <div style="width:300px;height:400px;"> <h4>タイトル</h4> <div style="background-color:yellow; height:100%; "></div> </div> <div>フッタなど</div> </body> </html> 原因は冒頭の様な仕様のためだった。 height:100%;を使用したのはiframeで高さが包含ブロックいっぱいに広がるようにするためだったのだが、iframeに限ったことではなく、height:100%;を使った時にはそのブロックが包含ブロックをオーバーしてしまうので注意が必要らしい。私が作った【ホームページ雛形】では問題が生じなかったので気付かなかった。この問題を解決するためには次のように包含ブロックに overflow-y:hidden; を指定しておいた方が良さそう。 <!DOCTYPE html> <html lang="ja"> <head> <meta ...

iframeのsrcにページ内リンク（#～）があるとスマホで見た時に親ページの先頭ではなくiframeまでスクロールして表示される問題

4/23/2021 06:32:00 午後

テストソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>予定表</title> <style>  </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の所までスクロールして表示されてしまう。まるで親ページのページ内リンクに飛んでいるかのよう。確認したスマホの環境は次の通り。...

プルダウンメニューをiframeの中に入れる試行錯誤その２

4/21/2021 07:40:00 午後

【プルダウンメニューをiframeの中に入れる試行錯誤その１】の続き。基本形 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>テスト</title> <style>  </style> </head> <body> <div class="block_menu"> <iframe src="http://hitorinezumi.html.xdomain.jp/template/menu.html" class="menu" title="メニュー"></iframe> </div> <div...

プルダウンメニューをiframeの中に入れる試行錯誤その１

4/21/2021 02:40:00 午後

基本形 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>テスト</title> <style>  </style> </head> <body> <div class="block_menu"> <iframe src="http://hitorinezumi.html.xdomain.jp/template/menu.html" class="menu" title="メニュー"></iframe> </div> <div class="container"> <div class="contents"> <span class=...