この例で提供されている説明を利用して、すぐに呼び出される関数式の一部として次のコードを html に追加しました。
(function hideOverlayOnEsc(){
document.addEventListener('keydown', function(e){
if( e.keyCode == '27' ){
cmnOverlayV2.hideOverlay();
}
}, false);
// IE8 Fix
if(!document.addEventListener){
document.attachEvent("onkeydown", function(e){
if( e.keyCode == '27' ){
cmnOverlayV2.hideOverlay();
}
});
}
})();
イベント リスナーをドキュメントに適用するこれら 2 つのバージョンを別々に使用すると、意図したとおりに機能します。つまり、IE8 fix
が削除された場合、コードは他のブラウザーで適切に動作します。addEventListener
コード ブロックを削除すると、IE8 で正常に動作します。ただし、これらのコード ブロックの両方を配置すると、現在、2 つのブラウザー カテゴリの少なくとも 1 つ (ie8 と ie8 ではない) で何らかの方法で html が壊れます。
参照用の追加情報:
オブジェクトが使用されたのdocument
は、Escape で非表示にする必要がある実際の html 要素が最初は DOM にロードされないためであり、これはそれを回避する簡単な方法でした。
このコード ブロックは、(内部の 2 つのコード ブロックの 1 つが省略されている場合) インライン<script>
呼び出しまたは外部.js
ファイルの呼び出しとして適切に機能します。
このコード ブロックが存在する html は、別の html ドキュメントの DOM に挿入されます。つまり、私が扱っているのは、動的に追加されるページ全体の一部にすぎません。このため、html が「壊れている」と言うと、実際に起こるのは、編集中の html が親 html ドキュメントの DOM に存在しないことです。
みたいなことを言う条件付きコメントを設定することを検討しましたが、親の html<!--[if IE8]>USE SCRIPT B<![endif]-->
のセクションにアクセスできないため、これは困難です。可能であれば<head>
、関数内でこれを解決したいと思います。hideOverlayOnEsc()