Quirksmode.org/Tarayıcı tespiti

Ceviz Viki sitesinden

Git ve: kullan, ara

This page has been copied from http://quirksmode.org/js/detect.html for permitted translation purposes.


Quirksmode.org yazıları : Tanışalım | Javascript Yerleşimi | Nesne kontrolü | İfadeler | Tarayıcı tespiti

Detaylı içindekiler tabloları için : Genel içindekiler tablosu | Javascript bölümünün içindekiler tablosu


Konu başlıkları

Tarayıcı tespiti

Tarayıcı tespiti kullanışlı, fakat çoğu zaman kullanımı abartılan bir Javascript tekniğidir. Bazen kullanıcının kullandığı tarayıcıya göre özel bir yanıt döndürmek isteyebilirsiniz, veya onu başka bir sayfaya yönlendirebilirsiniz. Mesela Safari tarayıcısını kullanan bir ziyaretçiyi Safari için özel hazırlanmış sayfaya yönlendirebilirsiniz.

Eğer Javascript öğrenmeye yeni başladıysanız, bu betiği kullanmayın. Lütfen önce nesne kontrolü sayfasını okuyun.

Önemli not: Bu sayfaların wiki altyapısı üzerinde olmasından dolayı, sayfanın içinde çalışan örneği buraya entegre edemiyoruz. Tarayıcınızın tespit edildiği örneğin çıktısını görebilmek için lütfen orijinal sayfayı (http://quirksmode.org/js/detect.html) ziyaret ediniz.

Betik

Aşağıdaki betiği Javascript dosyası olarak kaydedin. Sayfanıza eklediğiniz anda çalışacaktır, ve siz BrowserDetect nesnesinin üç özelliğini sorgulayabileceksiniz:

  • Tarayıcı adı :
    BrowserDetect.browser
  • Tarayıcı versiyonu :
    BrowserDetect.version
  • İşletim sistemi (OS) adı :
    BrowserDetect.OS
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
 
};
BrowserDetect.init();

Bu betik sadece siz düzenli olarak çıkan yeni tarayıcılarla birlikte dataBrowser ve dataOS dizilerini güncellerseniz, çalışmaya devam edecektir.

Tarayıcı(Browser) tespiti

Betikte bulunan dataBrowser isimli dizi, sizin kullanıcının tarayıcısını tespit etmenize yardımcı olacak özellikler barındıran nesnelerle doldurulmuştur. Genel yazım şekline dikkat ediniz:

dataBrowser: [
{
prop: window.opera,
identity: "Opera" // dikkat: virgül yok
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE" // dikkat: virgül yok
} // dikkat : burada da virgül yok
];

[] (Köşeli parantezler) bir dizi literali oluşturur, ve bu dizi literalinin içinde de nesne literalleri vardır. Her nesne literali küme parantezleri ile sınırlandırılmıştır {} ve içinde {ozellik:deger,} şeklinde özellikler barındırır. Özellik ve değer çiftlerini birbirinden ayırt etmek için aralarına virgül bırakmak gereklidir, ancak son küme parantezinden önce virgül bırakmak yasaklanmıştır.


  • Translator's note -- Çevirmenin notu* Literal nedir? Bir değerin herhangi bir değişkenin içine depolanmadan doğrudan yazılmış haline "literal" denilmektedir. Örneğin
var degisken=5;
alert(degisken);//bu değişkendir.
 
alert(5);//5 kendi başına bir Number tipinde literaldir.
alert("selam");//"selam" String tipinde bir literaldir.

Literaller hakkında daha fazla bilgi için şuraya göz atabilirsiniz : Javascript te durağan değerler


Özellikler *

dataBrowser isimli dizideki her nesne şu özellikleri içerebilir:

  1. string ve subString özellikleri. Bu şu demektir: "string özelliğinin içinde subString de geçen ifadeyi ara". Eğer subString özelliğinin taşıdığı ifade string içinde bulunursa, tarayıcı tanımlanmış olur.
  2. (prop) özelliği. "(prop) özelliğinin bu tarayıcı tarafından desteklenip-desteklenmediğine bak". Eğer destekleniyorsa, tarayıcıyı tanımlamış oluruz.
  3. (identity) özelliği. Bu özellik eğer içinde bulunduğu nesne tarayıcıyı tanımlamakta en uygun nesne bulunursa, BrowserDetect.browser özelliğinin değeri olacaktır.
  4. versionSearch özelliği. Bu versiyon numarasını araştırmak içindir. Eğer bu özellik yazılmamışsa, yerine (identity) özelliği kullanılır.

Her nesne ya 1. ya 2. özelliği (ikisini birden değil!) bulundurmalıdır. 3. özelliğin bulunması mecburidir. 4. Özellik isteğe bağlıdır.

Örnek: Safari

Bir örnek olarak, Safari tarayıcısını tanımlayan bir nesne:

{
string: navigator.vendor,
subString: "Apple",
identity: "Safari"
},

Bu betik navigator.vendor özelliğinin değerini alır ve içinde "Apple" ifadesinin geçip geçmediğine bakar. Eğer bu ifade geçiyorsa, BrowserDetect.browser özelliği "Safari" olur ve tarayıcı kontrolü sona erer. Eğer eşleşme olmazsa, betik sonraki nesnelere bakmak için çalışmasına devam eder.

Örnek: Opera

Bir sonraki örnek nesnemiz Opera için :

{
prop: window.opera,
identity: "Opera"
},

Buradaki betik window.opera özelliğinin bulunup-bulunmadığını kontrol eder. Eğer bu özellik bulunursa BrowserDetect.browser özelliği "Opera" olarak kurulur ve tarayıcı denetiminden çıkılır. Eğer bulunamazsa, betik sonraki nesnelere bakmak için çalışmasına devam eder.

userAgent ve vendor

Tarayıcı kontrolünün bütün inceliği hangi bilgi için nereye bakılacağını bilmekten geçer. Genellikle navigator.userAgent kullanıyoruz. Bununla birlikte, tam olarak bu kontrol yapılagelen birçok küçük versiyon değişikliklerini içerir, ama çeşitli tarayıcılar amatör internet programcılarının yazdığı betikleri kendilerini Explorer olarak tanıtıp yanıltabilirler. Bu kitabın (ppk on javascript) üçüncü bölümü bu sorunun üzerine eğilmektedir, ayrıca navigator.userAgent in buna benzer birçok sıkıcı detayı vardır.

Son zamanlarda, yeni tarayıcılar navigator.vendor özelliğini desteklemeye başlamıştır, bu özellik tarayıcıyı sağlayıcısı (vendor: Tarayıcıyı üreten şirket, kuruluş, vakıf vs.) bilgisini içerir. Genellikle bu özelliğin içerdiği dizeyi (string) kontrollerimde kullanmayı tercih ederim, bu özellik tarayıcılar tarafından yanıltıcı şekilde kullanılmamaktadır, böylece tespit işlemini yaparken kafamız daha az karışacaktır.

Elbette, amatörlerin benim tespit (kontrol) betiğimi Safari, Opera, Konqueror veya diğer tarayıcıları tespit etmek için kullanmasından sonra, tarayıcı sağlayıcıları ileride navigator.vendor özelliğini değiştirmek zorunda kalırsa, benim tespit betiğim daha fazla çalışmayacaktır.(Güncelleme gerektirecektir)

Kontrol sıralaması

dataBrowser içindeki nesneler belirli bir sırada yazılmalıdır; bu dataBrowser ın neden dizi olarak tanımlandığının iyi bir açıklamasıdır. Herhangi bir tespit sonucu olumlu olduğunda betiğin çalışması sonlanır, ve geri kalan nesneler kontrol edilmez bile.

Kontrol sıralaması çok önemlidir. Genel kural küçük tarayıcıları (kullanıcısı az olan tarayıcılar, kullanımı yaygın olmayan tarayıcılar) önce kontrol etmenizdir. Bunun sebebi birçok yaygın olmayan tarayıcının kullanıcılarına tarayıcının tanımlayıcı özelliklerini değiştirme şansı verip, "tarayıcı tespiti"nin etrafından dolaşıp, atlatmak istemesidir. (*Çevirmenin notu : Örneğin Opera tarayıcısıyla dolaşırken, onu ziyaret ettiğiniz siteye Explorer gibi tanıtıp, o şekilde gezinmek mümkündür. Bunun sebebi ise, bir takım amatör geliştiricilerin bir sitenin ziyareti için belli tarayıcıları kullanmayı şart koşmasıdır.*)

Örneğin, Opera tarayıcısındaki navigator.userAgent özelliği "MSIE" dizesini içerebilir. Eğer biz önce Explorer kontrolü yaparsak, "MSIE" dizesini buluruz ve doğru olmadığı halde tarayıcının Explorer olduğu sonucuna vararak yanılgıya düşeriz. Doğru bir sıralamayla yanlış tespitin önüne geçebilmek için, öncelikle Safari tarayıcısını kontrol etmeliyiz. Eğer tarayıcı Opera ise, betik asla "MSIE" dizesinin varlığının kontrol edildiği nesneye doğru ilerlemez.

Safari'nin navigator.userAgent özelliği ayrıca "Gecko" dizesini de içerir. Bu benzer bir probleme daha sebep olur: Mozilla tarayıcısını kontrol eden kod "Gecko" dizesini alarak Safari tarayıcısı Mozilla sanılabilir. Bu yüzden Mozilla kontrolü sadece eğer tarayıcının Safari olmadığından emin olunursa yapılmalıdır. (Sıralamada Mozilla kontrolü sonra gelmelidir.)

Eğer yeni çıkan bir tarayıcı için nesne eklerseniz, her zaman dizinin sonundaki Explorer/Mozilla nesnelerinden daha önce ekleyin.

Versiyon numaraları

Genellikle, versiyon numaraları doğrudan navigator.userAgent özelliğinin içinde tarayıcı isminden hemen sonra gelir. Betik tarayıcının adını bulur ve ondan hemen sonra gelen versiyon numarasını alır. Örneğin, şu Konqueror'un navigator.userAgent özelliğidir:

Mozilla/5.0 (compatible; Konqueror/3; Linux)

Maalesef Safari'nin navigator.userAgent dizesi asla o anda geçerli olan versiyonunu içermez; sadece içinde bulunduğu Apple versiyon numarasını verir. (Örneğin 1.3.2 değil de 312.6). Bu sebepten versiyon numarası tespiti Safari altında çalışmaz. Bu tamamen Apple firmasının hatası olduğundan ( açıkça yayınlanmış kullanım şekillerine uymuyorlar), bunu dikkate almıyorum.

versionSearch

Genellikle navigator.userAgent tanımlayıcı dizesi ile versiyon numarası tespit edilebilir (tarayıcı ismi ile aynıdır. Eğer tarayıcı adı "iCab" ise, betik "iCab" dizesini araştırır.

Ancak, Explorer "MSIE" dizesine, Mozilla "rv" dizesine ihtiyaç duyar, Netscape tarayıcısının eski versiyonları için ise "Mozilla" dizesi geçerlidir. Bu sorunları karşılık, tarayıcı nesnesine versionSearch özelliği ekleyebilirsiniz. Eğer versiyon tespiti için kullanılmış ise, identity özelliğinin taşıdığı dize değeri (string) kullanılmaz.

Örneğin Firefox ve Explorer nesnelerini alalım:

{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},

Eğer tarayıcı Firefox ise, betik "Firefox" dizesini araştırmalıdır. Versiyon tespiti için araştırılacak dize identity özelliği ile aynı ise, özel olarak versionSearch belirtmek gerekmez.

Explorer kendi versiyon numarasını "MSIE" dizesinin sonrasına koymaktadır. "Explorer" ı identity (tanımlama) dizesi olarak kullanırım, ama versionSearch özelliğini "MSIE" olarak belirtmeliyim.

userAgent ve appVersion

Versiyon tespit betiği tarayıcı adını navigator.userAgent ve navigator.appVersion özelliklerinde arar. Bunun sebebi iCab tarayıcısıdır : bu tarayıcının navigator.userAgent özelliği "iCab" dizesini içermeyebilir, fakat navigator.appVersion bu dizeyi (string) daima içerir.

İşletim sistemi

İşletim sistemi tespiti, tarayıcı tespitine benzer olarak çalışır. Şu andaki tüm işletim sistemi (OS) tespit betiklerim navigator.platform özelliğini kullanmaktadır, bu özellik ihtiyacımız olan tüm bilgiyi doğru şekilde içermektedir.

navigator

Aşağıda göreceğiniz nesneler navigator nesnesinin içerdiği nesnelerdir. Bu değişkenler okunduğunda tarayıcı ve ziyaretçinizin bilgisayarı için veriler içerir. Bu verileri tarayıcı tespiti için yeni nesneler eklerken kullanın.

(Çevirmenin notu: Orijinal sayfayı ziyaret ettiğinizde aşağıdaki bölümü kendi tarayıcınıza göre doldurulmuş olarak bulacaksınız. Aşağıdaki bilgiler şu anda yazıyı yazdığım bilgisayarın tarayıcısını yansıtmaktadır. Genel-geçer bilgiler değildir.)

navigator.appCodeName = Mozilla
navigator.appName = Microsoft Internet Explorer
navigator.appMinorVersion = 0
navigator.cpuClass = x86
navigator.platform = Win32
navigator.plugins =
navigator.opsProfile = null
navigator.userProfile = null
navigator.systemLanguage = tr
navigator.userLanguage = tr
navigator.appVersion = 4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.04506.590; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
navigator.userAgent = Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.04506.590; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
navigator.onLine = true
navigator.cookieEnabled = true
navigator.mimeTypes =
Kişisel araçlar