ＣＤ、ＬＰ管理と音楽のデータベース・システム　RecLib: インターネット・パソコン

window.resize （２）

2022-02-14T21:21:17+09:00

今回もＷｅｂページを作るサーバーサイドの話題です。

　よりも前に resize イベントが発生する事があるのが判りました。

onLoad で window サイズを取得して保存、window.onresize=function {....}; では、window サイズが変更されていれば resize に必用な処理、そうでなければ何もしない。としていたのですが、onLoad の前に onResize が実行されるとはねぇ。

結局、var windowHeight, var windowWidth という変数を用意して「あり得ない値」（たとえば 0 とか）で初期化しておき、onResize で windowHeight などが初期値であった場合はその時の window サイズを windowHeight などに代入し、resize の処理はしないようにしました。

var windowWidth = 0;

var windowHeight = 0;

onLoad 時に windowWidth, windowHeight にその時の window サイズを保存

window.onResize = function{

var curWindowWidth=window.innerWidth;

if((windowWidth == 0) && (windowHeight == 0)){

windowWidth = curWindowWidth;
windowHeight = curWindowHeight;

}else{

if(ウインドウサイズが変化していたら){

onResize に必用な処置;

}

としました。今のところＯＫみたい。

・・・ったく、面倒な・・・

window.resize

2022-02-13T04:11:43+09:00

今回はＷｅｂページを作るサーバーサイドの話題です。

ブラウザでＷｅｂページを見ている時に、マウスなどでウインドウのサイズを変更すると window.resize イベントが発生します。イベントハンドラは新しいウインドウに合わせて画面レイアウトを修正したりするわけです。今作成中の版では、ウインドウ幅によって表示を変更するようにしているのですが・・・

画面表示を変更するにはページを作り直すのが簡単。ウインドウの大きさを変更なんて操作はさほど頻繁ではないし。と言う訳で、同じページを単純に再作成するようにしました。ＤＢを検索なども全部再実行。場面によっては結構重いけど、まあいいか。

ところが、ウインドウのサイズを変更していないにもかかわらず resize イベントが発生する事がありました。ページを移動すると、そのページが２回作成されてしまいます。それも全ページで。

https://www.infoscoop.org/blogjp/2015/02/27/ie8-window-resize/　に情報がありました。DOM の高さを変更すると resize が発生するのだそうです。回避策も書いてありました。resize のイベントハンドラで「本当にサイズが変わっているか」を調べ、変わっていない場合はイベントは無視する、というものでした。

あまりスマートではないと思うけど、他に方法がないのでは仕方がない。サイズの検査の数行を追加してＯＫになりましたが、なぜ２回実行されるのかが判るのに２日かかってしまいました。やれやれ。だけど、良かった、よかった。

DOCTYPE HTML その後

2022-01-22T14:53:27+09:00

ＤＢアプリの各ページにを入れたのですが、動かなくなったのは style.width でけではありませんでした。

画面のスクロール位置を得るのに

document.FORM_NAME.scrollLeft, document.FORM_NAME.scrollTop

を使っていたのですが、これらの値が常に０になってしまいました。

これ、元はＩＥの仕様らしいのですが、Firefox でも動いていたので気にしていなかったのですが、標準仕様ではなかったようです。

window.scrollX , window.scrollY に変更したらＯＫでした。

位置の復元は

document.FORM_NAME.scrollLeft, document.FORM_NAME.scrollTop に値を代入していたのですが、これもＮＧ。　window.scrollTo(x,y); としたらＯＫでした。

Windows を買えばＩＥが付いてくるし、

ＩＥを前提にしたサイトが増えると Firefox としても対応せざるを得ない・・・ので対応しただけだったようです。Html にはこんなのが沢山ありそうで、次は何が発覚するかな？？

いろんなブラウザ屋さんが「独自に拡張」したのがデファクトスタンダードになってしまい、仕様は後追いなので、混乱の極みですね。何とかしてほしいけど、ブラウザもサイトも「出回ってしまった」のでどうしようもないでしょうね。

ブラウザに警告された

2022-01-19T11:39:51+09:00

ＤＢの新版作成中なんですが、firefox のブラウザコンソールに見慣れないメッセージが表示されました、それも全ページに対して。アプリ自体は動くのですが、気になります。読んでみたら「このページは後方互換性によって動いている。を使えだそうです。そこで、各ページの先頭にを入れると警告メッセージは出なくなったのですけど、画面のレイアウトが不正になってしまいました。

調べてみると「後方互換で動いているので画面のレイアウトが不正になる可能性がある」らしい。でもを削除すれば正しいレイアウトになる、何じゃ、コレ。

どうやら JavaScript が function の途中で処理を打ち切っているらしい。（これ、JavaScript の仕様なんですね。エラーが起こると、その時点で処理を打ち切る）

...style="width:100;" などの行に単位「px, %」がないのが原因でした。

旧仕様：単位が記述されていない場合は「px である」として動作する。

新仕様：単位が記述されていない場合はエラーとする。

のようです。そこらじゅう直して動くようになりました。それにしても「単位が記述されていない場合は px であるとみなす」のではどんな不具合が起こるのでしょうか。理解できないけど、動いたから、まっ、いいか。

Select　Option の代替品（１０）

2021-11-26T16:04:47+09:00

Window 幅を直前のページから受け取り、それを基準にしていたのですが、ウインドウの横幅を大きくしたり小さくしたり・・があるんですよね。幅を縮小するとページ作成を再実行しようが何をしようがうまくいかない。当たり前なんだけど、こういうのって直面するまで気づかないのは「よくある事」で（なに、お前が不注意なだけだって？？）。

で、どうするかと言うと、ページ起動時に window 幅と「サーバー側にある」幅を示すパラメータ値を取得して実際の幅を決める方法です。似たような小細工は「音源の再生」の場面でもやったのですが、面倒なので誤魔化そうとしていたんです。

どうやったかと言うと、Jsp, Java プログラムが JavaScript から参照したいサーバー側のパラメータを JavaScript のグローバル変数として書き出しておいて、JavaScript はそれを参照する、というだけです。片方向だけどパラメータを受け渡す事ができますね。やれやれ。余計な手間がかかってしまった。（手を抜くとロクなことないぞ・・・分かっているんですけどね・・・）

Select　Option の代替品（９）

2021-11-19T18:38:26+09:00

MySelect の幅、％単位での指定は、うまくいかないので諦めました。親要素の幅が分かればいいんですけど、サーバー側からはクライアント上のブラウザの内にある情報なんか見えない。要素の幅をサーバーへ送信するページとかを作れば出来るはずですが、とっても面倒。結局％指定はあきらめて、「ウインドウ幅の１／２０」を基準とした幅の単位を定義して％単位の代わりにしました。

ここで必用なのはウインドウ幅なんですが、これもクライアント上のブラウザ内の情報なので簡単には取得できません。そこで、直前のページの幅を基準として使う事にしました。これならば各ページが window.innerWidth の値を送信～受信して幅を算出すれば良い。なんとかなりました。（送受信するパラメータが、また１つ増えてしまった）

おまけ的な機能、背景色の指定を作っていたのですが、Html, CSS, JavaScript に遊ばれてしまいました。背景色の指定には bgColoe=...,、 style backgroundColor:...、element.style.backgroundColoe、element.style.background=... などがあり、同じ意味、目的なのに相手によって使い分けなくてはいけない。うっかり element.style.background-color などと書くとエラーになる。「-」が演算子と解釈されるみたい。

style="background-color:'red' はＮＧで、style="background-color:red と書かなくてはならない。一方、element.style.background=red と書くとエラー（そんな変数はない）で、element.style.background='red' と書かなくてはならない。

Html、CSS、JavaScript は統一的に設計～仕様を決定ではなくて、デファクトスタンダードを寄せ集めたように思えるので、仕方ないか。それにして何とかならんのか。と言って、今から仕様を追加しても古い仕様を捨てるわけにもいかない。せいぜい「古い仕様なので推奨しない」と警告するくらいしか出来そうにありませんね。

我慢して使うしかなさそうです。

、

Select　Option の代替品（８）

2021-11-15T19:43:46+09:00

onChange のハンドラをどうやって起動するかで苦戦していましたが、結局

通常の

文字列「"onChanheFunction(param1, param2,...)" 」を受取り、

eval("onChanheFunction(param1, param2,...)" ) とするわけです。

param に document,MyForm.TextBox.Value のようにタグなどが記述されていても、きちんと評価して実行してくれます。

MDN などによると、eval() にはセキュリティー上のリスクがある上、負荷が重いので【使うな】となっています。確かに不特定の文字列を評価して実行するならば、たとえばユーザーが text box などに入力した文字列を実行するならば「とっても危険」でしょう。でも、私のシステムの場合は、本来は

（３）onChange などのイベントハンドラを起動できない。記述してなかったので起動できるわけはなかったのですが・・・。ちょっと苦戦しましたが、何とかなりました。とりあえず必用なのは onChange なので、それだけを実装しました。本来の

ＣＤ、ＬＰ管理と音楽のデータベース・システム RecLib: インターネット・パソコン