Navigator는 개발자가 애플리케이션에 적합한 브라우저를 선택하는 데 도움이 되는 현재 웹 브라우저 기능 및 속성을 검색하기 위해 다양한 속성을 제공하는 개체입니다. 이것 ' 항해자 ” 개체는 사용자 환경에 더 적합하도록 UI 디자인, 글꼴 크기, 상호 작용 등 현재 웹 브라우저와 관련된 데이터를 제공하는 “userAgentData”라는 속성을 제공합니다. 네비게이터 객체가 제공하는 다른 많은 속성이 있으며 이는 우리의 문서에서 간략하게 논의됩니다. 기사1 그리고 기사 2 .
이 블로그에서는 JavaScript의 Navigator 개체 userAgentData 속성에 대해 설명합니다.
Navigator userAgentData 속성을 파악하는 방법은 무엇입니까?
'에서 제공하는 정보입니다. 사용자에이전트데이터 ” 속성을 통해 개발자는 다양한 브라우저 환경을 검색하고 특정 플랫폼에서 발생할 수 있는 문제를 식별할 수 있습니다. '를 통해 액세스할 수 있습니다. 항해자 ' 물체. 속성 값 ' 브랜드', '모바일', '플랫폼' '는 '를 사용하여 검색할 수 있습니다. 사용자에이전트데이터 ” Navigator 객체의 속성입니다.
통사론
네비게이터 “ 사용자에이전트데이터 ” 속성의 구문은 다음과 같습니다.
항해자. 사용자에이전트데이터
위 구문은 '와 같은 속성을 포함하는 값을 반환합니다. 브랜드', '모바일', '플랫폼' ” 웹 브라우저와 관련이 있습니다.
실제 데모를 볼 수 있는 프로그램을 만들어 보겠습니다.
< 몸 >< h1 스타일 = '색상: 생도블루;' > 리눅스 < / h1 >< 단추 클릭하면 = '브랜드()' > 브랜드 검색 < / 단추 >
< 단추 클릭하면 = '이동하는()' > 모바일 검색 < / 단추 >
< 단추 클릭하면 = '플랫폼()' > 브랜드 검색 < / 단추 >
< 스크립트 >
기능 브랜드(){
console.log( navigator.userAgentData.brands )
}
함수 모바일(){
console.log('모바일에서 보고 계십니다: ' + navigator.userAgentData.mobile)
}
함수 플랫폼(){
console.log('사용 중인 플랫폼 또는 운영 체제:\n ' + navigator.userAgentData.platform)
}
< / 스크립트 >
< / 몸 >
위의 코드 블록에 표시되는 코드에 대한 설명은 다음과 같습니다.
- 먼저 세 개의 “< 단추 >' 태그는 '를 호출하는 데 사용됩니다. 브랜드()”, “모바일()” 및 “플랫폼() 'onclick' 이벤트 리스너를 사용하여 맞춤 제작된 함수입니다.
- “< 내부 스크립트 >” 태그, “ 브랜드 ()” 함수는 “navigator.userAgentData.brands” 속성을 사용하여 웹 브라우저 브랜드 정보를 검색합니다. 또한 콘솔을 통해 이 속성으로 검색된 결과를 표시합니다.
- 같은 방식으로 '를 정의합니다. 모바일()” 및 “플랫폼() ” 기능을 활용하고 “ navigator.userAgentData.mobile” 및 “navigator.userAgentData.platform ” 속성을 각각 지정합니다.
- 이러한 속성은 콘솔을 통해 해당 데이터를 반환합니다.
최종 결과는 다음과 같습니다.
출력에서는 버튼을 클릭하면 해당 값이 검색되어 콘솔 창에 표시된다는 것을 보여줍니다.
보너스 팁: Navigator userAgent 속성 사용
“ 사용자 에이전트 ” 속성은 “에서도 제공됩니다. 항해자 ” 객체에서는 사용자가 현재 사용하고 있는 브라우저의 이름, 버전, 플랫폼을 반환합니다. 이 네비게이터 속성의 실제 데모는 다음과 같습니다.
< 몸 >< h1 스타일 = '색상: 생도블루;' > 리눅스힌트 < / h1 >
< 단추 클릭하면 = '브라우저데이터()' > 브라우저 관련 데이터 < / 단추 >
< 피 ID = '표적' >< / 피 >< 스크립트 >
함수 브라우저데이터 ( ) { 콘솔.로그 ( navigator.userAgent ) }
< / 스크립트 >
< / 몸 >
위의 코드는 다음과 같이 설명됩니다.
- 먼저 “< 단추 >' 태그는 ' 태그와 함께 사용됩니다. 클릭하면 'browserData()' 함수를 호출하는 이벤트 리스너입니다.
- 다음으로 이 “ 브라우저데이터 ()” 함수는 “< 안에 정의되어 있습니다. 스크립트 >” 태그입니다. 이 기능은 “ navigator.userAgent ” 속성을 사용하고 결과가 콘솔에 표시됩니다.
위 코드 완료 후 웹페이지 미리보기:
출력에는 웹 브라우저와 관련된 데이터가 검색되어 콘솔 창에 표시되었음을 보여줍니다.
네비게이터 userAgentData 속성을 파악하는 절차를 배웠습니다.
결론
“ navigator.userAgentData ” 속성은 개발자가 단일 또는 다중 웹 브라우저용 애플리케이션을 특별히 만들 때 많은 도움이 되는 브라우저별 값을 검색합니다. 이 속성은 '에 대한 값을 검색할 수 있습니다. 브랜드', '모바일', '플랫폼' ” 문자열을 사용하는 경우 반환되는 값은 브라우저마다 다릅니다. 문자열은 ' 옆에 첨부되어야 합니다. navigator.userAgentData ” 속성을 사용하여 해당 문자열에 대한 값만 반환합니다. 이 블로그에서는 JavaScript에서 navigator.userAgentData 속성을 사용하는 프로세스를 성공적으로 설명했습니다.