■キー割当表示 [Shift-H] ─ KeyNavi:キーボードを活用して 
ホームページを快適に─
 
ホーム [0] JavaScriptバグ&回避法リスト:1.目次 [1] 3. イベント(一般)編 ・サイトマップ [Shift-S]

JavaScriptバグ&回避法リスト
 ■ 3. イベント(一般)編

【このページ内のトピック: 「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】
3.1 フレーム+ページ内リンクでfocus移動(IE5.5,6)
3.2 フレーム&windowのリサイズでイベント処理不安定(NS4)
3.3 windowのサイズ変更でCSSレイアウト崩壊(NS4)
3.4 ロード時にonresizeが実行される(NS4.05)
3.5 画像、フォーム上でイベントハンドラがきちんと動作しない(NS4)

「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。

 ■ 3.1 フレーム+ページ内リンクでfocus移動(IE5.5,6)

メニューフレームと本文フレームに分かれたページがあるとします。 メニュフレーム内のページ内リンク 「<a href=body.html#name target=body>...</a>」 をクリックするとフォーカスが本文(body)側に移動してしまいます (IE4,5では大丈夫です)。
マウスによるリンククリックの代わりに Tabキーとリターンキーを 使うユーザが混乱する可能性があります。
リンク先がname無しの「body.html」だとフォーカスは移動しません。

実験ページ(IE5.5,IE6で試してみて下さい)

この問題に対応したい場合は リンクの機能を使わず 「<a href=body.html#name>」の代わりにJavaScriptを使って 「<a href="javascript:void(0)" onclick="body.location='body.html#name'">」 としたらうまく行くようです。

 ■ 3.2 フレーム&windowのリサイズでイベント処理不安定(NS4)

いろいろ調べてみたところ resize時には「document.captureEvents(Event....)」 の指定がクリアされるようです。 その為 onresize時にそれらを再実行して解決します。

【抜粋:「きぃなび」でのWindowリサイズ時の処理】

function kl_onresize(e){
        .....
        kl_onresize_ex(e);
        if(KL_NS4) if(top!=self){
                document.captureEvents(Event.KEYDOWN);
                document.captureEvents(Event.KEYPRESS);
                document.captureEvents(Event.KEYUP);
                document.captureEvents(Event.MOUSEDOWN);
        }
        return true;
}

 ■ 3.3 windowのサイズ変更でCSSレイアウト崩壊(NS4)

Netscape4.xではスタイルシートの指定内容によっては レイアウトがウィンドウのリサイズにより崩れます。
style='position:absolute;'を指定している場合に頻繁に発生するようです。
NS4がある人は試してみて下さい。

style='position:absolute;'を指定したページ

さて、この問題を解決するには ページのサイズ変更時に ページの内容を再読込みします。 詳細は下記。

 ■ 3.4 ロード時にonresizeが実行される(NS4.05)

縦か横どちらかでもスクロールバーが表示されるページ (殆どのページが該当) では ロード時にonresizeが呼ばれます。 先のバグ対策の為に「window.onresize=new Function('location.reload()');」 などとしていると NS4.05では永遠に再読込みを続けるか その途中で「不正な処理が云々」でブラウザが異常終了します。
(4.0X系の全てはチェックしてないですが NS4.04、NS4.08でもそうなりました。)

Windows版のNS4(NS4.5,4.7なども含む)ではスクロールバーが表示されていると 「window.scroll」「window.scrollBy」での移動量が正しくない という問題も発生します。
回避方法: JavaScript@KeyNavi.Net:スクロール実行

「<body onresize='location.reload()'>」としたページ(NS4.0Xはクラッシュする可能性有り)
「window.onresize=new Function('location.reload()');」としたページ(NS4.0Xはクラッシュする可能性有り)

そこでウィンドウのサイズが実際に変更されたことを確認してから location.reload()を実行するようにします。

【実際にリサイズされた時のみ再読込み実行(NS4.0xバグ対策)】


<script language="javascript"><!--
function onresize_ns4(){
    if(iW!=window.innerWidth || iH!=window.innerHeight) location.reload();
}
if(document.layers){
    iW=window.innerWidth; iH=window.innerHeight;
    window.captureEvents(Event.RESIZE);
    window.onresize=onresize_ns4;
}
//-->
</script>

リサイズを確認してから再読込みするページ

KeyNaviでオプション指定

03/07/20追加
KeyNaviを使っている場合は 「KL_RELOAD_ONRESIZE_NS4」オプションを指定すれば OKです。

リサイズ問題はKeyNavi側で対応 (2003/09/23追加)
NS4専用オプションは廃止し 代わりに 「KL_RELOAD_ONRESIZE="auto" (デフォルト)」という指定値を用意しました。 ウィンドウのリサイズイベント発生時に Netscape4.x(KL_NS4) 且つ レイヤーが存在する(document.layers.length>0)か調べ 必要な場合に自動でページを再読み込みします。 また先のNS4.0x系のバグにも対応しています。

このオプションはデフォルトで有効なため KeyNaviを採用したページではリサイズ対策が不要です。 以前の「NS4」専用オプションを指定していても 無視されるので問題ありません。

リサイズ時の再読み込みの是非を直接指定したい場合は「KL_RELOAD_ONRESIZE」に 真か偽の値を与えて下さい。

【KeyNaviを組み込んでいる場合は自動処理されます】


<script language="javascript" src="/files/keynavi_ja.js"></script>

KeyNaviを組み込んでバグ回避したページ

 ■ 3.5 画像、フォーム上でイベントハンドラがきちんと動作しない(NS4)

Netscape4.xではロジックにもよりますが 設定したイベントハンドラが画像上、フォーム上できちんと 動作しないことがあります。

作者が直面したケースでは ページ内の全てのform要素(formと各種input,textarea等)、 img要素に name属性をつけて 解決できました。

例えばレイヤーに「onmousedown」ハンドラをつけた場合、 マウスクリックで「mousedown」イベントが 発生するはずです。しかしレイヤー内の画像をクリックした場合に 動作しません。色々試したところ画像にname属性をつけたらOKでした。

NS4でイベント処理がおかしかったら試してみて下さい。





ページの先頭へ     

前のページへ
次のページへ
JavaScriptバグ&回避法リスト 目次 【数字キーでアクセス】
例 : 「2.1節」は「2」キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。
1. 目次
2. 基本編
3. イベント(一般)編
3.1 フレーム+ページ内リンクでfocus移動(IE5.5,6)
3.2 フレーム&windowのリサイズでイベント処理不安定(NS4)
3.3 windowのサイズ変更でCSSレイアウト崩壊(NS4)
3.4 ロード時にonresizeが実行される(NS4.05)
3.5 画像、フォーム上でイベントハンドラがきちんと動作しない(NS4)
4. イベント(キー入力)編
5. レイヤー編
6. その他


ホーム [0] JavaScriptバグ&回避法リスト:1.目次 [1] 3. イベント(一般)編 ・サイトマップ [Shift-S]
■キー割当表示 [Shift-H] ─ KeyNavi Project 2003 ─