Dalam pengembangan front-end situs web, masalah kompatibilitas browser telah membuat kami terburu-buru, dan saya tidak tahu berapa banyak masalah yang akan menyebabkan kita dilahirkan. Kompatibilitas browser adalah masalah pertama yang perlu dipecahkan oleh kerangka kerja pengembangan front-end. Untuk menyelesaikan masalah kompatibilitas, Anda harus terlebih dahulu menentukan jenis dan versi browser.
Javascript adalah bahasa utama pengembangan front-end. Kita dapat menilai jenis dan versi browser dengan menulis program JavaScript. Umumnya ada dua cara untuk menilai jenis browser di JavaScript. Salah satunya adalah untuk membedakannya berdasarkan atribut unik dari berbagai browser, dan yang lainnya adalah menilai dengan menganalisis atribut UserAgent browser. Dalam banyak kasus, setelah nilai menentukan jenis browser, perlu untuk menilai versi browser untuk menangani masalah kompatibilitas. Versi browser umumnya dapat diketahui dengan menganalisis UserAgent browser.
Pertama -tama mari kita menganalisis karakteristik berbagai browser dan pengguna mereka.
YAITU
Hanya IE mendukung pembuatan kontrol ActiveX, jadi dia memiliki sesuatu yang tidak dimiliki oleh browser lain, yang merupakan fungsi ActiveXObject. Selama Anda menilai bahwa objek jendela memiliki fungsi ActiveXObject, Anda dapat dengan jelas menentukan bahwa browser saat ini adalah IE. Useragents khas untuk setiap versi IE adalah sebagai berikut:
Mozilla/4.0 (kompatibel; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (kompatibel; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (kompatibel; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (kompatibel; MSIE 5.0; Windows NT)
Di antara mereka, nomor versi adalah nomor setelah MSIE.
Firefox
Elemen DOM di Firefox memiliki fungsi GetBoxObjectFor, yang digunakan untuk mendapatkan posisi dan ukuran elemen DOM (fungsi GetBoundingClientRect yang sesuai dengan IE). Ini unik untuk Firefox. Anda dapat mengatakan bahwa browser saat ini adalah Firefox. Pengguna beberapa versi Firefox kira -kira sebagai berikut:
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
Di antara mereka, nomor versi adalah nomor setelah Firefox.
Opera
Opera menyediakan logo browser khusus, yang merupakan properti Window.Operera. UserAgent khas untuk opera adalah sebagai berikut:
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
Di antara mereka, nomor versi adalah angka yang dekat dengan opera.
Safari
Ada fungsi opendatabase di browser Safari yang tidak dimiliki oleh browser lain, yang dapat digunakan sebagai bendera untuk menilai safari. UserAGents UserAgent untuk Safari adalah sebagai berikut:
Mozilla/5.0 (windows; u; windows nt 5.2) applewebkit/525.13 (khtml, seperti tokek) versi/3.1 safari/525.13
Mozilla/5.0 (iPhone; U; CPU seperti Mac OS X) AppleWebKit/420.1 (KHTML, Like Gecko) Versi/3.0 Mobile/4A93 Safari/419.3
Nomor versinya adalah nomor setelah versi.
Chrome
Chrome memiliki fungsi MessageEvent, tetapi Firefox juga memilikinya. Untungnya, Chrome tidak memiliki fungsi GetBoxObject untuk Firefox, dan dapat dinilai secara akurat berdasarkan kondisi ini. Saat ini, UserAgent Chrome adalah:
Mozilla/5.0 (windows; u; windows nt 5.2) applewebkit/525.13 (khtml, seperti tokek) chrome/0.2.149.27 safari/525.13
Di antara mereka, nomor versi hanya setelah Chrome.
Menariknya, UserAgent Chrome juga berisi karakteristik Safari, mungkin ini adalah dasar bagi Chrome untuk menjalankan semua aplikasi browser Apple.
Selama kami memahami informasi di atas, kami dapat mendasarkan karakteristik ini pada jenis browser dan versinya. Kami akan menyimpan hasil penilaian dalam ruang nama sys dan menjadi informasi logo dasar dari kerangka kerja front-end untuk dibaca oleh program di masa depan. Jika Anda menentukan browser, Sys Namespace akan memiliki atribut nama browser, dan nilainya adalah nomor versi browser. Misalnya, jika IE 7.0 ditentukan, nilai sys.ie adalah 7.0; Jika Firefox 3.0 ditentukan, nilai sys.firefox adalah 3.0. Berikut ini kode untuk menentukan browser:
[Ctrl+A Select All Catatan: Jika Anda perlu memperkenalkan JS eksternal, Anda perlu menyegarkan untuk mengeksekusi]
Kami menempatkan penilaian kami pada IE terlebih dahulu, karena IE memiliki sebagian besar pengguna, diikuti oleh Firefox. Menilai jenis browser dalam urutan pengguna dapat meningkatkan efisiensi penilaian dan melakukan pekerjaan yang kurang berguna. Alasan mengapa Chrome ditempatkan di tempat ketiga adalah karena kami memperkirakan bahwa Chrome akan segera menjadi browser ketiga dengan pangsa pasar. Di antara mereka, ketika menganalisis versi browser, ekspresi reguler digunakan untuk membedah informasi versi.
Jika JavaScript Anda sangat bagus, Anda juga dapat menulis kode penilaian sebelumnya seperti ini:
[Ctrl+A Select All Catatan: Jika Anda perlu memperkenalkan JS eksternal, Anda perlu menyegarkan untuk mengeksekusi]
Ini dapat membuat kode JavaScript lebih ramping. Tentu saja, keterbacaannya sedikit lebih buruk, itu tergantung pada apakah Anda menghargai efisiensi atau pemeliharaan.
Metode menilai browser yang menggunakan fitur yang berbeda lebih cepat daripada menganalisis pengguna dengan ekspresi reguler, tetapi fitur -fitur ini dapat bervariasi dengan versi browser. Misalnya, jika fitur yang awalnya unik browser telah mencapai kesuksesan di pasar, browser lain juga dapat menambahkan fitur ini, sehingga menyebabkan fitur unik browser menghilang dan menyebabkan penilaian kami gagal. Oleh karena itu, pendekatan yang relatif aman adalah menilai jenis browser dengan menganalisis fitur -fitur di UserAgent. Terlebih lagi, menilai informasi versi membutuhkan penguraian pengguna browser.
Dengan menganalisis informasi UserAgent dari berbagai browser, tidak sulit untuk mendapatkan ekspresi reguler yang membedakan berbagai browser dan versi mereka. Selain itu, penilaian jenis dan versi browser dapat dibuat dalam satu. Jadi, kita bisa menulis kode berikut:
[Ctrl+A Select All Catatan: Jika Anda perlu memperkenalkan JS eksternal, Anda perlu menyegarkan untuk mengeksekusi]
Di antara mereka, ekspresi penilaian seperti "...? ...: ..." digunakan untuk menyederhanakan kode. Kondisi penilaian adalah pernyataan penugasan yang tidak hanya menyelesaikan pencocokan ekspresi reguler dan menyalin hasil, tetapi juga secara langsung menggunakan penilaian bersyarat. Informasi versi selanjutnya hanya perlu diekstraksi dari hasil pencocokan sebelumnya, yang merupakan kode yang sangat efisien.
Kode-kode di atas adalah semua pra-penelitian untuk membuat kerangka kerja front-end dan diuji dan meneruskan lima browser utama. Di masa depan, Anda hanya perlu menilai browser tertentu dalam bentuk if (sys.ie) atau if (sys.firefox), dan Anda hanya perlu menilai versi browser dalam bentuk if (sys.ie == '8.0') atau jika (sys.firefox == '3.0'), yang masih sangat elegan untuk diekspresikan.
Proyek kerangka kerja front-end telah diluncurkan, semuanya tergantung pada proses dan hasil ...
Editor Wulin.com telah memilah beberapa kode untuk Anda:
Salinan kode adalah sebagai berikut:
var browser = objek baru ();
Browser.ismozilla = (typeof document.Implementation! = 'Tidak terdefinisi') && (typeof document.implementation.createdocument! = 'Tidak terdefinisi') && (typeof htmldocument! = 'Tidak terdefinisi');
Browser.isie = window.activexObject? Benar: false;
Browser.isfirefox = (navigator.useragent.tolowercase (). Indexof ("firefox")! =-1);
Browser.issafari = (navigator.useragent.tolowercase (). IndexOf ("safari")! =-1);
Browser.isopera = (navigator.useragent.tolowercase (). IndexOf ("opera")! =-1);
function check () {
waspada (browser.isie? 'yaitu': 'bukan yaitu');
alert (browser.isfirefox? 'firefox': 'bukan firefox');
alert (browser.issafari? 'safari': 'bukan safari');
alert (browser.isopera? 'opera': 'bukan opera');
}
window.onload = periksa;
Salinan kode adalah sebagai berikut:
fungsi isBrowser () {
var sys = {};
var ua = navigator.useragent.tolowercase ();
var s;
)
(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 (/versi // ([/d.]+).*Safari/))? sys.safari = S [1]: 0;
if (sys.ie) {// js dinilai sebagai browser yaitu
alert ('// www.vevb.com'+sys.ie);
if (sys.ie == '9.0') {// js dinilai sebagai yaitu 9
} lain jika (sys.ie == '8.0') {// js dinilai sebagai yaitu 8
}kalau tidak{
}
}
if (sys.firefox) {// js dinilai sebagai browser firefox (firefox)
alert ('// www.vevb.com'+sys.firefox);
}
if (sys.chrome) {// js dinilai sebagai browser Google Chrome
alert ('// www.vevb.com'+sys.chrome);
}
if (sys.opera) {// js dinilai sebagai browser opera
alert ('// www.vevb.com'+sys.opera);
}
if (sys.safari) {// js dinilai sebagai browser safari apel
alert ('// www.vevb.com'+sys.safari);
}
}
Bagikan metode fungsi untuk mendapatkan tipe browser dan nomor versi browser melalui jQuery. Kode jQuery spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
$ (dokumen) .ready (function () {
varbrow = $. Browser;
varbinfo = "";
if (brow.msie) {binfo = "microsoft internetexplorer"+brow.version;}
if (brow.mozilla) {binfo = "mozillafirefox"+brow.version;}
if (brow.safari) {binfo = "apelfari"+brow.version;}
if (brow.opera) {binfo = "opera"+brow.version;}
waspada (binfo);
});
Mulai dari versi 1.9, jQuery menghapus $ .browser dan $ .browser.version dan menggantinya dengan metode pendukung $. Jika Anda perlu memahami $ .sport, silakan merujuk ke:
jQuery 1.9 Gunakan $ .support bukannya $ .Browser Metode