นาวิเกเตอร์เป็นออบเจ็กต์ที่มีคุณสมบัติต่างๆ เพื่อดึงคุณสมบัติและคุณสมบัติเว็บเบราว์เซอร์ปัจจุบันที่ช่วยนักพัฒนาในการเลือกเบราว์เซอร์ที่เหมาะสมสำหรับแอปพลิเคชันของตน นี้ ' นาวิเกเตอร์ ” ออบเจ็กต์นำเสนอคุณสมบัติชื่อ “userAgentData” ซึ่งให้ข้อมูลที่เกี่ยวข้องกับเว็บเบราว์เซอร์ปัจจุบัน เช่น การออกแบบ UI ขนาดแบบอักษร หรือการโต้ตอบเพื่อให้เหมาะกับสภาพแวดล้อมของผู้ใช้มากขึ้น มีคุณสมบัติอื่น ๆ อีกมากมายที่วัตถุเนวิเกเตอร์มอบให้ซึ่งมีการกล่าวถึงสั้น ๆ ในของเรา หัวข้อที่ 1 และ บทความ 2 .
บล็อกนี้จะอธิบายคุณสมบัติอ็อบเจ็กต์เนวิเกเตอร์ userAgentData ใน JavaScript
จะเข้าใจคุณสมบัติ userAgentData ของ Navigator ได้อย่างไร
ข้อมูลที่ได้รับจาก “ userAgentData คุณสมบัติ ” ช่วยให้นักพัฒนาสามารถค้นหาสภาพแวดล้อมเบราว์เซอร์ที่แตกต่างกันและระบุปัญหาใด ๆ ที่อาจเกิดขึ้นบนแพลตฟอร์มเฉพาะ สามารถเข้าถึงได้ผ่านทาง “ นาวิเกเตอร์ ' วัตถุ. ค่าคุณสมบัติ” แบรนด์” “มือถือ” และ “แพลตฟอร์ม” ” สามารถเรียกค้นได้โดยใช้ “ userAgentData ” คุณสมบัติของวัตถุเนวิเกเตอร์
ไวยากรณ์
เครื่องนำทาง” userAgentData ” คุณสมบัติมีไวยากรณ์ดังต่อไปนี้:
เครื่องนำทาง userAgentData
ไวยากรณ์ข้างต้นส่งกลับค่าที่มีคุณสมบัติเช่น “ แบรนด์” “มือถือ” และ “แพลตฟอร์ม” ” ที่เกี่ยวข้องกับเว็บเบราว์เซอร์
เรามาจัดโปรแกรมชมการสาธิตการใช้งานจริงกัน:
< ร่างกาย >< 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
“ userAgent ” ทรัพย์สินยังได้รับจาก “ เครื่องนำทาง ” วัตถุจะส่งกลับชื่อ เวอร์ชัน และแพลตฟอร์มสำหรับเบราว์เซอร์ปัจจุบันที่ผู้ใช้ใช้งานอยู่ การสาธิตเชิงปฏิบัติของคุณสมบัติตัวนำทางนี้ระบุไว้ด้านล่าง:
< ร่างกาย >< h1 สไตล์ = 'สี: นักเรียนนายร้อยสีฟ้า;' > ลินุกซ์คำแนะนำ < / h1 >
< ปุ่ม เมื่อคลิก = 'ข้อมูลเบราว์เซอร์()' > เบราว์เซอร์ที่เกี่ยวข้อง ข้อมูล < / ปุ่ม >
< พี รหัส = 'เป้า' >< / พี >< สคริปต์ >
ฟังก์ชั่น browserData ( ) { console.log ( navigator.userAgent ) }
< / สคริปต์ >
< / ร่างกาย >
รหัสข้างต้นอธิบายเป็น:
- อันดับแรก “< ปุ่ม >” ใช้แท็กพร้อมกับ “ เมื่อคลิก ” ตัวฟังเหตุการณ์ซึ่งเรียกใช้ฟังก์ชัน “browserData()”
- ต่อไปนี้” ข้อมูลเบราว์เซอร์ ()” ถูกกำหนดไว้ในฟังก์ชัน “< สคริปต์ >” แท็ก ฟังก์ชั่นนี้ใช้ “ navigator.userAgent ” คุณสมบัติและผลลัพธ์จะแสดงบนคอนโซล
ดูตัวอย่างหน้าเว็บหลังจากโค้ดด้านบนเสร็จสิ้น:
ผลลัพธ์แสดงว่าข้อมูลที่เกี่ยวข้องกับเว็บเบราว์เซอร์ได้รับการดึงและแสดงผ่านหน้าต่างคอนโซล
คุณได้เรียนรู้ขั้นตอนในการเข้าใจคุณสมบัติเนวิเกเตอร์ userAgentData แล้ว
บทสรุป
“ navigator.userAgentData คุณสมบัติ ” ดึงค่าเฉพาะเบราว์เซอร์ซึ่งช่วยได้มากเมื่อนักพัฒนาสร้างแอปพลิเคชันโดยเฉพาะสำหรับเว็บเบราว์เซอร์เดียวหรือหลายตัว คุณสมบัตินี้สามารถดึงค่าสำหรับ “ แบรนด์” “มือถือ” และ “แพลตฟอร์ม” ” สตริง ค่าที่ส่งคืนจะแตกต่างกันไปในแต่ละเบราว์เซอร์ ต้องแนบสตริงไว้ข้างๆ “ navigator.userAgentData ” คุณสมบัติเพื่อส่งคืนค่าสำหรับสตริงนั้นเท่านั้น บล็อกนี้ได้อธิบายกระบวนการใช้คุณสมบัติ navigator.userAgentData ใน JavaScript เรียบร้อยแล้ว