ในการพัฒนาส่วนหน้าของเว็บไซต์ปัญหาความเข้ากันได้ของเบราว์เซอร์ทำให้เรารีบเร่งและฉันไม่รู้ว่ามันจะทำให้เราเกิดปัญหาได้มากแค่ไหน ความเข้ากันได้ของเบราว์เซอร์เป็นปัญหาแรกที่กรอบการพัฒนาส่วนหน้าจำเป็นต้องแก้ไข ในการแก้ปัญหาความเข้ากันได้คุณต้องกำหนดประเภทและเวอร์ชันของเบราว์เซอร์ก่อน
JavaScript เป็นภาษาหลักของการพัฒนาส่วนหน้า เราสามารถตัดสินประเภทและเวอร์ชันของเบราว์เซอร์ได้โดยการเขียนโปรแกรม JavaScript โดยทั่วไปมีสองวิธีในการตัดสินประเภทเบราว์เซอร์ใน JavaScript หนึ่งคือการแยกแยะพวกเขาตามคุณลักษณะที่เป็นเอกลักษณ์ของเบราว์เซอร์ต่างๆและอื่น ๆ คือการตัดสินโดยการวิเคราะห์คุณลักษณะ useragent ของเบราว์เซอร์ ในหลายกรณีหลังจากค่ากำหนดประเภทเบราว์เซอร์จำเป็นต้องตัดสินรุ่นเบราว์เซอร์เพื่อจัดการกับปัญหาความเข้ากันได้ โดยทั่วไปแล้วรุ่นเบราว์เซอร์สามารถรู้จักกันได้โดยการวิเคราะห์ผู้ใช้เบราว์เซอร์
ก่อนอื่นให้วิเคราะห์ลักษณะของเบราว์เซอร์และผู้ใช้งานต่างๆ
เช่น
มีเพียง IE เท่านั้นที่รองรับการสร้างตัวควบคุม ActiveX ดังนั้นเธอจึงมีสิ่งที่เบราว์เซอร์อื่นไม่มีซึ่งเป็นฟังก์ชัน ActiveXObject ตราบใดที่คุณตัดสินว่าวัตถุหน้าต่างมีฟังก์ชั่น ActiveXObject คุณสามารถกำหนดได้อย่างชัดเจนว่าเบราว์เซอร์ปัจจุบันคือ IE ผู้ใช้ทั่วไปสำหรับแต่ละเวอร์ชันของ IE มีดังนี้:
Mozilla/4.0 (เข้ากันได้; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (เข้ากันได้; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (เข้ากันได้ MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (เข้ากันได้ MSIE 5.0; Windows NT)
ในหมู่พวกเขาหมายเลขเวอร์ชันคือหมายเลขหลังจาก MSIE
Firefox
องค์ประกอบ DOM ใน Firefox มีฟังก์ชั่น getBoxObjectfor ซึ่งใช้เพื่อให้ได้ตำแหน่งและขนาดขององค์ประกอบ DOM (ฟังก์ชัน getBoundingClientRect ที่สอดคล้องกับ IE) นี่เป็นเอกลักษณ์ของ Firefox คุณสามารถบอกได้ว่าเบราว์เซอร์ปัจจุบันคือ Firefox ผู้ใช้งานของ Firefox หลายรุ่นมีดังนี้:
Mozilla/5.0 (Windows; u; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; u; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; u; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
ในหมู่พวกเขาหมายเลขเวอร์ชันคือหมายเลขหลังจาก Firefox
โอเปร่า
Opera มีโลโก้เบราว์เซอร์พิเศษซึ่งเป็นคุณสมบัติของ Window.opera ผู้ใช้ทั่วไปสำหรับโอเปร่ามีดังนี้:
Opera/9.27 (Windows NT 5.2; u; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; u; en)
mozilla/5.0 (macintosh; ppc mac os x; u; en) opera 8.0
ในหมู่พวกเขาหมายเลขเวอร์ชันคือตัวเลขใกล้กับโอเปร่า
ซาฟารี
มีฟังก์ชั่น opendatabase ในเบราว์เซอร์ Safari ที่เบราว์เซอร์อื่นไม่มีซึ่งสามารถใช้เป็นธงเพื่อตัดสิน Safari ผู้ใช้ทั่วไปสำหรับ Safari มีดังนี้:
mozilla/5.0 (windows; u; windows nt 5.2) applewebkit/525.13 (khtml เช่น gecko) เวอร์ชัน/3.1 Safari/525.13
mozilla/5.0 (iphone; u; cpu เช่น mac os x) applewebkit/420.1 (khtml, เช่น gecko) เวอร์ชัน/3.0 มือถือ/4a93 Safari/419.3
หมายเลขเวอร์ชันคือตัวเลขหลังจากเวอร์ชัน
โครเมี่ยม
Chrome มีฟังก์ชั่น MessageEvent แต่ Firefox ก็มีเช่นกัน โชคดีที่ Chrome ไม่มีฟังก์ชั่น getBoxObjectfor ของ Firefox และสามารถตัดสินได้อย่างถูกต้องตามเงื่อนไขนี้ ปัจจุบันผู้ใช้ของ Chrome คือ:
mozilla/5.0 (windows; u; windows nt 5.2) applewebkit/525.13 (khtml, เช่น gecko) chrome/0.2.149.27 Safari/525.13
ในหมู่พวกเขาหมายเลขเวอร์ชันเป็นหลังจากโครเมี่ยมเท่านั้น
ที่น่าสนใจคือ useragent ของ Chrome ยังมีลักษณะของ Safari บางทีนี่อาจเป็นพื้นฐานสำหรับ Chrome ในการเรียกใช้แอปพลิเคชัน Apple Browser ทั้งหมด
ตราบใดที่เราเข้าใจข้อมูลข้างต้นเราสามารถยึดคุณลักษณะเหล่านี้ไว้ในประเภทเบราว์เซอร์และเวอร์ชันของมัน เราจะบันทึกผลลัพธ์การตัดสินในพื้นที่ชื่อ SYS และกลายเป็นข้อมูลโลโก้พื้นฐานของกรอบส่วนหน้าสำหรับโปรแกรมในอนาคตที่จะอ่าน หากคุณกำหนดเบราว์เซอร์เนมสเปซ SYS จะมีแอตทริบิวต์ของชื่อเบราว์เซอร์และค่าของมันคือหมายเลขเวอร์ชันของเบราว์เซอร์ ตัวอย่างเช่นหาก IE 7.0 ถูกกำหนดค่าของ sys.ie คือ 7.0; หากมีการกำหนด Firefox 3.0 ค่าของ sys.firefox คือ 3.0 นี่คือรหัสเพื่อกำหนดเบราว์เซอร์:
[CTRL+A SELECT ทั้งหมดหมายเหตุ: หากคุณต้องการแนะนำ JS ภายนอกคุณต้องรีเฟรชเพื่อดำเนินการ]
เราตัดสินของเราใน IE ก่อนเพราะเช่นมีผู้ใช้มากที่สุดตามด้วย Firefox การตัดสินประเภทเบราว์เซอร์ตามลำดับของผู้ใช้สามารถปรับปรุงประสิทธิภาพการตัดสินใจและทำงานที่ไร้ประโยชน์น้อยลง เหตุผลที่โครเมี่ยมอยู่ในอันดับที่สามเป็นเพราะเราคาดการณ์ว่า Chrome จะกลายเป็นเบราว์เซอร์ที่สามที่มีส่วนแบ่งการตลาด ในหมู่พวกเขาเมื่อวิเคราะห์เวอร์ชันเบราว์เซอร์การแสดงออกปกติจะถูกใช้เพื่อผ่าข้อมูลเวอร์ชัน
หากจาวาสคริปต์ของคุณดีมากคุณสามารถเขียนรหัสการตัดสินก่อนหน้านี้ได้เช่นนี้:
[CTRL+A SELECT ทั้งหมดหมายเหตุ: หากคุณต้องการแนะนำ JS ภายนอกคุณต้องรีเฟรชเพื่อดำเนินการ]
สิ่งนี้สามารถทำให้รหัส JavaScript มีความคล่องตัวมากขึ้น แน่นอนความสามารถในการอ่านนั้นแย่กว่านั้นเล็กน้อยขึ้นอยู่กับว่าคุณให้ความสำคัญกับประสิทธิภาพหรือการบำรุงรักษา
วิธีการตัดสินเบราว์เซอร์ที่ใช้คุณสมบัติที่แตกต่างกันเร็วกว่าการวิเคราะห์ผู้ใช้งานด้วยนิพจน์ทั่วไป แต่คุณสมบัติเหล่านี้อาจแตกต่างกันไปตามรุ่นเบราว์เซอร์ ตัวอย่างเช่นหากคุณสมบัติที่ไม่เหมือนใครของเบราว์เซอร์ประสบความสำเร็จในตลาดเบราว์เซอร์อื่น ๆ อาจเพิ่มคุณสมบัตินี้ซึ่งทำให้คุณลักษณะที่เป็นเอกลักษณ์ของเบราว์เซอร์หายไปและทำให้การตัดสินใจของเราล้มเหลว ดังนั้นวิธีการที่ค่อนข้างปลอดภัยคือการตัดสินประเภทเบราว์เซอร์โดยการวิเคราะห์คุณสมบัติในผู้ใช้ ยิ่งไปกว่านั้นข้อมูลเวอร์ชันการตัดสินต้องแยกวิเคราะห์ผู้ใช้เบราว์เซอร์
โดยการวิเคราะห์ข้อมูลผู้ใช้ของเบราว์เซอร์ต่างๆมันไม่ยากที่จะได้รับการแสดงออกปกติที่แยกแยะเบราว์เซอร์และรุ่นต่างๆ นอกจากนี้การตัดสินของประเภทเบราว์เซอร์และเวอร์ชันสามารถทำได้ในหนึ่งเดียว ดังนั้นเราสามารถเขียนรหัสต่อไปนี้:
[CTRL+A SELECT ทั้งหมดหมายเหตุ: หากคุณต้องการแนะนำ JS ภายนอกคุณต้องรีเฟรชเพื่อดำเนินการ]
ในหมู่พวกเขาการแสดงออกของการตัดสินเช่น "... ? ... : ... " ใช้เพื่อลดความซับซ้อนของรหัส เงื่อนไขการตัดสินเป็นคำสั่งงานที่ได้รับมอบหมายซึ่งไม่เพียง แต่จะเสร็จสิ้นการจับคู่ของการแสดงออกปกติและการคัดลอกผลลัพธ์ แต่ยังใช้การตัดสินตามเงื่อนไขโดยตรง ข้อมูลเวอร์ชันที่ตามมาจะต้องถูกแยกออกจากผลลัพธ์การจับคู่ก่อนหน้าซึ่งเป็นรหัสที่มีประสิทธิภาพมาก
รหัสข้างต้นล้วนการวิจัยล่วงหน้าสำหรับการสร้างเฟรมเวิร์กส่วนหน้าและทดสอบและส่งผ่านเบราว์เซอร์หลักห้าตัว ในอนาคตคุณจะต้องตัดสินเบราว์เซอร์บางตัวในรูปแบบของ IF (sys.ie) หรือถ้า (sys.firefox) และคุณจะต้องตัดสินรุ่นเบราว์เซอร์ในรูปแบบของ IF (sys.ie == '8.0') หรือถ้า (sys.firefox == '3.0')
โครงการ Front-End Framework ได้เปิดตัวทุกอย่างขึ้นอยู่กับกระบวนการและผลลัพธ์ ...
บรรณาธิการของ Wulin.com ได้จัดเรียงรหัสสองสามตัวให้คุณ:
การคัดลอกรหัสมีดังนี้:
VAR BROWSER = New Object ();
เบราว์เซอร์.ismozilla = (typeof document.implementation! = 'undefined') && (typeof document.implementation.createdocument! = 'undefined') && (htmldocument! = 'undefined');
เบราว์เซอร์. isie = window.activexobject? จริง: เท็จ;
Browser.isfireFox = (Navigator.useragent.toLowerCase (). indexof ("firefox")! =-1);
Browser.issafari = (Navigator.useragent.toLowerCase (). indexof ("Safari")! =-1);
เบราว์เซอร์. isopera = (navigator.useragent.toLowercase (). indexof ("opera")! =-1);
ตรวจสอบฟังก์ชั่น () {
Alert (browser.isie? 'IE': 'Not IE');
การแจ้งเตือน (เบราว์เซอร์ที่ไม่พอใจ? 'Firefox': 'Not Firefox');
Alert (Browser.issafari? 'Safari': 'Not Safari');
Alert (Browser.isopera? 'Opera': 'Not Opera');
-
window.onload = ตรวจสอบ;
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น iSbrowser () {
var sys = {};
var ua = navigator.useragent.toLowercase ();
var s;
(s = ua.match (/msie ([/d.like+) /)))
(s = ua.match (/firefox // ([/d.]+)/))? sys.firefox = s [1]::
(s = ua.match (/chrome // ([/d.]+)/))? sys.chrome = s [1]:
(s = ua.match (/opera. ([/d.]+)/))? sys.opera = s [1]:
(s = ua.match (/เวอร์ชัน // ([/d.]+).*safari/))? sys.safari = s [1]: 0;
if (sys.ie) {// js ถูกตัดสินว่าเป็นเบราว์เซอร์เช่น
การแจ้งเตือน ('// www.vevb.com'+sys.ie);
if (sys.ie == '9.0') {// js ถูกตัดสินว่าเป็น 9
} อื่นถ้า (sys.ie == '8.0') {// js ถูกตัดสินว่าเป็น 8
}อื่น{
-
-
if (sys.firefox) {// js ถูกตัดสินว่าเป็นเบราว์เซอร์ Firefox (Firefox)
การแจ้งเตือน ('// www.vevb.com'+sys.firefox);
-
if (sys.chrome) {// js ถูกตัดสินว่าเป็นเบราว์เซอร์ Google Chrome
การแจ้งเตือน ('// www.vevb.com'+sys.chrome);
-
if (sys.opera) {// js ถูกตัดสินว่าเป็นเบราว์เซอร์โอเปร่า
การแจ้งเตือน ('// www.vevb.com'+sys.opera);
-
ถ้า (sys.safari) {// js ถูกตัดสินว่าเป็นเบราว์เซอร์ Apple Safari
การแจ้งเตือน ('// www.vevb.com'+sys.safari);
-
-
แบ่งปันวิธีการใช้ฟังก์ชันเพื่อรับประเภทเบราว์เซอร์และหมายเลขเวอร์ชันเบราว์เซอร์ผ่าน jQuery รหัส jQuery เฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
$ (เอกสาร) .ready (function () {
varbrow = $. เบราว์เซอร์;
varbinfo = "";
if (brow.msie) {binfo = "Microsoft InternetExPlorer"+brow.version;}
if (brow.mozilla) {binfo = "mozillafirefox"+brow.version;}
if (brow.safari) {binfo = "applesafari"+brow.version;}
if (brow.opera) {binfo = "opera"+brow.version;}
การแจ้งเตือน (Binfo);
-
เริ่มต้นจากเวอร์ชัน 1.9 jQuery ลบ $. browser และ $. browser.version และแทนที่ด้วยวิธี $ .support หากคุณต้องการเข้าใจ $. support โปรดดู:
jQuery 1.9 ใช้ $. support แทนวิธี $ .browser