JavaScriptクロスブラウザ属性判定方法_JavaScriptスキル

今日コードを書いているときに非常に簡単なエラーを発見しました。変数を宣言するときは、ブラウザごとに API 定義が異なるため、どの属性であるかを判断するために次の記述方法を使用することがよくあります。たとえば、

コードをコピー コードは次のとおりです:

var fullscreenElement = document.mozFullScreenElement || document.webkitFullscreenElement || document.fullscreenElement;

使用する属性を確認します。
ただし、JavaScript の値を条件として判断する場合は注意してください。
例:

コードをコピー コードは次のとおりです:

var sLeft = window.screenLeft || window.screenX; //firefox use screenX
console.log(sLeft);

このコードは、screenLeft が wi​​ndow.screenLeft を返し、Firefox が wi​​ndow.screenX を返すことを期待します。
しかし、screenLeft がちょうど 0 に等しい場合、|| の後の条件に入り、その後 gg になります。

そのため、より正確に値を判断するには、hasOwnProperty または typeof を使用することを推奨します。

コードをコピー コードは次のとおりです。

var sLeft = window.screenLeft;
if( !window.hasOwnProperty('screenLeft')) sLeft = window.screenX;