投稿

5月, 2021の投稿を表示しています

対処法：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
コメントを投稿
続きを読む

BlueGriffonのバグ：tableタグ内のtdタグで「セルの分割」をするとtdタグではなくtbタグが作られて失敗する

イメージ
2021/5/19 7:55頃。  BlueGriffonはWYSIWYG方式でウェブページの編集が行えるフリーソフトウェアで最初からウェブページを作成するとソースが汚くなるが編集ならば汚くなりにくく便利なソフト。BlueGriffonにはいくつかのバグがあるらしく、 空行が勝手に挿入されたり、新たに保存したら別名で保存する時に保存用ダイアログが表示されずに反応が無くなって保存できず強制終了せざるを得なくなったりするバグ には遭遇していたが、今回、 表の編集を試したところ、致命的なバグに遭遇した 。 元のソース。 <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>bluegriffonの表修正のバグ：セルの分割に失敗する</title> <style type="text/css"> <!-- table{width:600px;border-collapse:collapse;border-spacing:0px;} tbody,th,td {border:1px solid gray;} td {text-align:center;vertical-align:top;padding:5px;width:100px;} --> </style> </head> <body> <table> <tbody> <tr><th><br></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr> <tr> <th>1</th> <td>A1</td> <td&
コメントを投稿
続きを読む

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;"
コメントを投稿
続きを読む

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

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"> <!-- // function totopiframe(){alert(new XMLSerializer().serializeToString(document.getElementById("ifr").contentWindow.document));} function totopiframe(){document.getElementById("ifr").contentWindow.scrollTo(0,0);} -->
コメントを投稿
続きを読む

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

イメージ
  【プルダウンメニューを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> <!-- *{font-size:16px;box-sizing:border-box;} body{width:821px;margin:10px;} .block_menu{height:50px;background-color:red;} .menu{width:100%;border:none;height:50px;border:10px solid pink;} .container{height:300px;background-color:white;} .contents{height:100%;border:2px solid green;} .footer{height:40px;background-color:black;} --> </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の所から表示してしまう問題

 【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"の所は何
コメントを投稿
続きを読む

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

イメージ
 "パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます" 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
コメントを投稿
続きを読む