Monday, June 25, 2012

Javascript хэл дээр гар утаснаас вэб сайтыг ачаалж байвал гар утсанд зориулсан вэб рүү /хувилбар/ redirect хийх

      Энэхүү постыг нэгэн уншигчийн хүсэлтээр оруулж байна. Би урьд нь PHP хэл дээр гар утаснаас тухайн вэб сайт руу орж байгааг мэдэх гээд нэгэн demo оруулж байсан юм. Харин PHP хэл дээрх demo-г уншсан уншигч HTML хэл дээр яаж гар утаснаас орж байгаа мэдэх вэ гэж асуусан. HTML хэл иймэрхүү динамик зүйлийг хийж болохгүй. Тиймээс Javascript-ийг ашиглах нь зүгээр байх. Бас .htaccess дээр 


RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

иймэрхүү зүйл бичиж болно. За ингээд энэ удаад Javascript дээр нэгэн энгийн код орууллаа.

          Зарим вэб сайтыг гар утсаар үзэж байхад зарим tag-уудыг гар утас уншиж чадахгүй мөн тухайн вэб сайт нь гар утсаар үзэхэд хэтэрхий том үзэхэд тохиромжгүй байдаг. Тиймээс гар утсаар вэб үзэж байгаа хэрэглэгчид вэб сайтынхаа гар утасны хувилбарыг, PC-ээр /notebook, desktop computer ... гэх мэт/ үзэж байгаа хэрэглэгчид үндсэн хувилбараа /notebook, desktop computer ... гэх мэт төхөөрөмжүүдэд зориулсан/ үзүүлэх нь тохиромжтой байдаг.
Ингээд тухайн хэрэглэгч ямар төхөөрөмжөөр интернетэд холбогдож байгааг мэдэх жижиг кодыг толилуулъя.



<script type="text/javascript">
          var userAgent_infos = navigator.userAgent;
</script>


Javascript хэлний " navigator.userAgent " нь цаанаасаа зарлагдсан байдаг глобал хувьсагч бөгөөд хэрэглэгчийн интернет хөтчийн мэдээллийг авч байдаг.

My Android browser Output:

Mozilla/5.0 (Linux; U; Android 2.1-update1; en-in; HTC_Wildfire_A3333 Build/ERE27)
AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari


index.html

<!DOCTYPE html>
<html>
<body>


<script type="text/javascript">


var userAgent_infos = navigator.userAgent;


var iphone=userAgent_infos.search("iPhone");
 var android=userAgent_infos.search("Android");
var palmpre=userAgent_infos.search("webOS"); 
 var berry=userAgent_infos.search("BlackBerry");
var ipod=userAgent_infos.search("iPod");


if(iphone >= 0 || android >= 0 || palmpre >= 0 || berry >= 0 || ipod>= 0)
{
//Та PC-c интернетэд холбогдсон байна.
window.location = "http://toli.call.mn/mobile.php";
}
else
{
//Та PC-c интернетэд холбогдсон байна.
window.location = "http://toli.call.mn";
}
</script>


</body>
</html>

Жишээ нь:  userAgent_infos.search("iPhone")  хэсэг нь хэрэглэгчийн хөтчийн мэдээллээс iPhone гэсэн string олдвол тухайн хэрэглэгч гар утаснаас вэб сайт руу хандаж байна гэж үзнэ.  iPhone гэсэн үг олдвол 0 ба түүнээс дээш утга буцаах бөгөөд гар утасны хувилбар луу redirect хийнэ.

За ингээд л боллоо. 
Good luck!

1 comment: