20 Haziran 2007 Çarşamba

Browser information object

Merhaba,
Bu yazımda size kısa ve işe yarar bir koddan bahsedeceğim.
Hepimizin bildiği gibi JavaScript server tarafında değilde client yani kullanıcı tarafında çalışır. Bu durum bize bir çok avantaj sağlar, bu avantajlardan biride web sitemizin kullanıcı kitlesi hakkında bir çok bilgiye ulaşabilmemizdir. Mesela işletim sistemi, işlemcisi, ekran çözünürlüğü, kullanılan browser, sürümü hatta cookie'lerin çalışıp çalışmadığı gibi bilgiler.

Peki bu bilgiler ne işe yarar?
bu bilgileri kullanarak kullanıcı kitlenizi tespit edebilirsiniz ve web sitenizi buna göre ayarlayabilirsiniz mesela kullanıcılarınızın %80'i 800X600 çözünürlük kullanıyor, demekki sizinde sitenizde bu duruma göre bir ayarlama yapmanız gerekiyor yada kullanıcılarınızın %90'ı firefox kullanıyor o zaman IE bug'larıyla okadarda uğraşmanıza gerek yokmuş :) peki bu bilgileri nasıl toplayacağız.

Bunun için bir obje yazdım gayet derli toplu oldu.



// Define Browser
function Browser(){
this.name = navigator.appName;
this.codename = navigator.appCodeName;
this.version = navigator.appVersion.substring(0,4);
this.platform = navigator.platform;
this.javaEnabled = navigator.javaEnabled();
this.cookieEnabled = navigator.cookieEnabled;
this.userAgent = navigator.userAgent;
this.screenWidth = screen.width;
this.screenHeight = screen.height;
this.loc = window.location.href;
this.referrer = (document.referrer)? document.referrer : "Direct";
this.charSet = (document.characterSet)? document.characterSet : document.charset;
this.language = (navigator.language)? navigator.language : navigator.browserLanguage;

this.information = function(){
info = "\n== Client Descriptions ==\n";
info += "Application Name is: " + this.name + "\n";
info += "Application Code name is: " + this.codename + "\n";
info += "Application Version is: " + this.version + "\n";
info += "Location: " + this.loc + "\n";
info += "Referrer: " + this.referrer + "\n";
info += "User agent: " + this.userAgent + "\n";
info += "Platform is: " + this.platform + "\n";
info += "Is java Enabled?: " + this.javaEnabled + "\n";
info += "Is Cookie Enabled?:" + this.cookieEnabled + "\n";
info += "Language: " + this.language + "\n";
info += "Document Character Set: " + this.charSet + "\n";
info += "Client screenWidth: " + this.screenWidth + "\n";
info += "Client screenHeight: " + this.screenHeight + "\n";
return info;
}

this.alert = function(){
alert(this.information());
}
}


Bu kodu kullanmak oldukça kolay. ilk önce bu objeden bir instance yaratmalıyız


var info = new Browser();


Artık browser bilgilerine info.information(); method'unu kullanarak ulaşabilirsiniz bu method kullanıcıdan toplanan bilgileri okunabilir bir string haline çevirip geri döndürür.
aynı çekilde info.alert(); method'uda bu mesajı alert box içerisinde gösterir.
bir deneyelim info.alert()

Sonuç genelde şuna benzer birşey olmalıdır:

== Client Descriptions ==
Application Name is: Microsoft Internet Explorer
Application Code name is: Mozilla
Application Version is: 4.0
Location: http://www.jotform.com/results.php

User agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

Platform is: Win32
Is java Enabled?: true
Client screenWidth: 1280
Client screenHeight: 1024


Bu yöntemle alınan bilgiyi biz jotform'un error report'ları için kullanıyoruz.

bir runtime error oluştuğunda jotform sessizce ajax yoluyla bu error'u ve kulanıcı bilgilerini bize yolluyor bizde biran önce bu erroru onarıyoruz.

Jotform'un yaptığı şu:


var iserrorsent = false; // Global to check error status (sent or not sent)
// Error Handling, Handle errors gracefuly
window.onerror = function(desc, file, line, chr){
// Ignore these errors
if(desc.match(/onBG|offBG|buttonOver|buttonOut|buttonDown/gim)){ return true; }
var info = new Browser();

// Create message
message = "\n== Error Descriptions ==\n";
message += "Error: "+ desc +"\n";
message += "Ocuured in: "+ file +"\n";
message += "Occured on line: "+ line +"\n";
message += info.information();
// Send message
if(!iserrorsent){ //Dont send more than one error in one session
reportError( message ,"Error occurred in Jotform: "+desc);
iserrorsent = true;
}
return true;
}

// Send errors by ajax
function reportError(desc,title){
var res = makeRequest("action=report_error" + "&title=" + encodeURIComponent(title) + "&desc=" + encodeURIComponent(desc));
}




Tabi burda karşımıza yeni bir şey daha çıktı window.onerror onerror event'i browserda runtime error oluştuğunda tetiklenen event'tir tam kullanımı şudur.


window.onerror = function(description, fileLocation, lineNumber){
message = "\n== Error Descriptions ==\n";
message += "Error: "+ description +"\n";
message += "Ocuured in: "+ fileLocation +"\n";
message += "Occured on line: "+ lineNumber +"\n";
alert(message);
}



Umarım bu bilgiler işinize yarar hepinize iyi çalışmalar.

4 yorum:

Adsız dedi ki...

merhaba, yararli bilgiler icin tesekkürler.
bir sorum olacakti:

sitemdeki bir sayfada kullandigim bir javascript var ve Internet Explorer ile uyumlu. Firefox ile uyumsuz.

Sitemdeki bu sayfayi ziyaret eden Firefox kullanicilarinin bahsettigim javascriptten kaynaklanan hatayi yasamamalari icin acaba browser secimine göre söz konusu javascripti calsitirip calistirmama durumunu kontrol edebilir miyim?

Mesela, IE kulaniyorsa javascript calissin; Firefox kullaniyorsa javascript pasif kalsin gibi.

Umarim anlatabilmisimdir.

Cevaplariniz icin tesekkürler.

Serkan Yerşen dedi ki...

Merhaba,
Yapmak istediğin işleme "Browser detection" denir ve hiç tavsiye etmeyeceğim bir yöntemdir.

Tavsiye etmeyişimin bir sürü nedeni var.

Birincisi bugün çalışmıyor diye blockladığın Firefox yarın bu özelliği desteklemeye başlarsa sen farkedemiyeceksin ve kullanıcıların sebepsiz yere bu özellikten mahrum kalacak.

İkincisi Browser detection aşılması çok kolay bir yöntemdir. Kesin sonuç vermez ve başını ağrıtır.

Benim tavsiyem ise şu olacaktır.
"Object detection". Browserları ayırt etmek yerine çalışmayan nesneleri blocklamakdır. Bu sayede sadece firefox değil hata veren bütün browserları tespit edebilirsin ve hata vermelerini engellersin ayrıca birisi bu özelliği desteklemeye başladığı anda sorunsuz şekilde çalışmaya da başlıyacaktır. Ne olursa olsun bu önlemide atlayamazlar.

Bu konuyla ilgili güzel bir yazıyı bu sitede bulabilirsin
http://www.quirksmode.org/js/support.html

Tabi sonuçta en doğrusu hatayı tespit edip blocklamak yerine çalışmasını sağlamak olucaktır.
Iyi çalışmalar.

kkendir dedi ki...

Merhaba
Çok uzun süre önce yazmışsınız yeni gördüm :).

Benim de bir sorum olacaktı.Client'ın bilgisayarında javascript browser da java yüklü bilgisini alabiliyormuyum?

Teşekkürler

Serkan Yerşen dedi ki...

Evet elbette. Örnekde verdiğim kodu ekle "info.javaEnabled" sana true/false şeklinde javanın yüklü olup olmadığını dönecektir.