JavaScript 크로스 브라우저 속성 판단 방법_javascript 기술

오늘 코드를 작성하다가 아주 쉬운 오류를 발견했습니다. 변수를 선언할 때 브라우저마다 API 정의가 다르기 때문에 어떤 속성이 있는지 확인하기 위해 종종 다음과 같은 작성 방법을 사용합니다. 예:

코드 복사 코드는 다음과 같습니다.

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

사용할 속성을 확인하려면 ||
단, 자바스크립트의 가치를 조건으로 판단할 때는 주의하세요.
예:

코드 복사 코드는 다음과 같습니다.

var sLeft = window.screenLeft || window.screenX; //firefox는 screenX를 사용합니다
console.log(sLeft);

이 코드는 screenLeft가 window.screenLeft를 반환하고 Firefox는 window.screenX를 반환하기를 바랍니다.
그러나 screenLeft가 정확히 0과 같으면 || 뒤에 조건이 입력되고 그 다음에는 gg가 됩니다.

따라서 값을 보다 정확하게 판단하려면 hasOwnProperty나 typeof를 사용하는 것이 좋습니다.

코드 복사 코드는 다음과 같습니다.

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