브라우저에서 클라이언트 시간대 가져 오기

클라이언트 브라우저에서 시간대를 얻는 신뢰할 수있는 방법이 있습니까? 다음 링크를 보았지만 더 강력한 솔루션을 원합니다.

JavaScript로 시간대 자동 감지

자바 스크립트에서 시간대 감지

이 저장소 페이지를 보면 도움이됩니다

jstz.min.js를 다운로드하고 HTML 페이지에 기능을 추가하십시오

<script language="javascript">
    function getTimezoneName() {
        timezone = jstz.determine()
        return timezone.name();
    }
</script>

표시 태그에서이 함수를 호출하십시오.

반년 후에 우리는 그것을위한 내장 된 방법을 가지고 있습니다! 최신 브라우저의 경우 다음을 사용합니다.

const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(tz);

이것은 IANA 시간대 문자열을 반환하지만 offset 은 반환하지 않습니다 . MDN 참조 에서 자세히 알아보십시오 .

호환성 표 -2019 년 3 월 기준, 전 세계적으로 사용중인 브라우저의 90 %에서 작동합니다. Internet Explorer에서 작동하지 않습니다 .

사람들이 "시간대"를 찾을 때 종종 "UTC 오프셋"만으로 충분합니다. 예를 들어, 서버는 UTC + 5이고 클라이언트가 UTC-8에서 실행되고 있음을 알고 싶어합니다 .

평범한 오래된 자바 스크립트에서 (new Date()).getTimezoneOffset()/60 는 UTC에서 현재 시간 오프셋을 반환합니다.

(MDN 문서에서)getTimezoneOffset() 반환 값 의 부호에 가능한 "gotcha"에 주목할 가치가 있습니다 .

시간대 오프셋은 UTC와 로컬 시간의 차이 (분)입니다. 이는 현지 시간대가 UTC보다 뒤에 있으면 오프셋이 양수이고, 앞에 있으면 네거티브임을 의미합니다. 예를 들어 UTC + 10 : 00 시간대 (오스트레일리아 동부 표준시, 블라디보스토크 시간, 차모로 표준시)의 경우 -600이 반환됩니다.

그러나 날짜 / 시간 관련 Javascript 코드 에는 day.js 를 사용하는 것이 좋습니다 . 이 경우 다음을 실행하여 ISO 8601 형식의 UTC 오프셋을 얻을 수 있습니다.

> dayjs().format("Z")
"-08:00"

클라이언트가이 정보를 쉽게 위조 할 수 있다고 언급 할 수 있습니다.

(참고 :이 답변은 원래 https://momentjs.com/을 권장 했지만 dayjs는 더 현대적이고 작은 대안입니다.)

현재로서는 가장 좋은 방법은 mbayloon의 답변 에서 제안 된 것처럼 jstz 일 것 입니다.

완성도를 높이기 위해 Intl 이라는 표준이 있다고 언급해야합니다 . 이미 Chrome에서 이것을 볼 수 있습니다.

> Intl.DateTimeFormat().resolvedOptions().timeZone
"America/Los_Angeles"

(이것은 실제로 표준을 따르지 않으므로 라이브러리를 고수 해야하는 또 하나의 이유입니다)

당신은 시간대 를 추측하기 위해 순간 시간대 를 사용할 수 있습니다 :

> moment.tz.guess()
"America/Asuncion"

여기 jsfiddle이 있습니다

현재 사용자 시간대의 약어를 제공합니다.

다음은 코드 샘플입니다

var tz = jstz.determine();
console.log(tz.name());
console.log(moment.tz.zone(tz.name()).abbr(new Date().getTime()));

Josh Fraser가 취한 것과 비슷한 접근 방식을 사용하여 UTC에서 브라우저 시간 오프셋과 DST를 인식하는지 여부를 결정합니다 (그러나 코드에서 다소 단순화 됨).

var ClientTZ = {
    UTCoffset:  0,          // Browser time offset from UTC in minutes
    UTCoffsetT: '+0000S',   // Browser time offset from UTC in '±hhmmD' form
    hasDST:     false,      // Browser time observes DST

    // Determine browser's timezone and DST
    getBrowserTZ: function () {
        var self = ClientTZ;

        // Determine UTC time offset
        var now = new Date();
        var date1 = new Date(now.getFullYear(), 1-1, 1, 0, 0, 0, 0);    // Jan
        var diff1 = -date1.getTimezoneOffset();
        self.UTCoffset = diff1;

        // Determine DST use
        var date2 = new Date(now.getFullYear(), 6-1, 1, 0, 0, 0, 0);    // Jun
        var diff2 = -date2.getTimezoneOffset();
        if (diff1 != diff2) {
            self.hasDST = true;
            if (diff1 - diff2 >= 0)
                self.UTCoffset = diff2;     // East of GMT
        }

        // Convert UTC offset to ±hhmmD form
        diff2 = (diff1 < 0 ? -diff1 : diff1) / 60;
        var hr = Math.floor(diff2);
        var min = diff2 - hr;
        diff2 = hr * 100 + min * 60;
        self.UTCoffsetT = (diff1 < 0 ? '-' : '+') + (hr < 10 ? '0' : '') + diff2.toString() + (self.hasDST ? 'D' : 'S');

        return self.UTCoffset;
    }
};

// Onload
ClientTZ.getBrowserTZ();

로드시 ClientTZ.getBrowserTZ()함수가 실행되어 다음을 설정합니다.

• ClientTZ.UTCoffset UTC에서 브라우저 시간 오프셋 (분) (예 : CST는 -360 분, UTC에서 -6.0 시간)입니다.
• ClientTZ.UTCoffsetT접미어가 DST 및 표준 (비 DST) 인 형식 '±hhmmD'(예 :)의 오프셋으로 ;'-0600D'DS
• ClientTZ.hasDST (참 또는 거짓).

는 ClientTZ.UTCoffset일부 시간대가 분수 시간당 오프셋 (예, 0415)을 가지고 있기 때문에, 대신에 시간의 분에 제공됩니다.

배후의 의도 ClientTZ.UTCoffsetT는 드롭 다운 <select>목록 과 같이 시간대 테이블 (여기에 제공되지 않음)의 키로 사용하는 것 입니다.

아니요. 신뢰할 수있는 방법은 없으며 결코 없을 것입니다. 당신은 정말 당신이 클라이언트를 신뢰할 수 있다고 생각 했습니까?