Geolokáció bevezetés
Update1
A működő kód itt elérhető/kipróbálható. What is My IP? Ezt ide fel kellett hoznom, mert rengetegen keresik.
Mielőtt elmerülnénk a geolokációban egy kis visszatekintésre szeretnélek elvinni benneteket. Ebben a cikkben megnézzük, hogy a böngésző és a felhasználó egyéb adatait régen hogy is kérdeztük le. Erre legfőképp a user agent volt segítségünkre.
A user agent (felhasználói ügynök) olyan kliensalkalmazás, amely egy elosztott kliens-szerver rendszer kommunikációjában használt hálózati protokollt valósít meg. Leggyakrabban a World Wide Webet elérő alkalmazások (webböngészők, keresőrobotok stb.) esetében használják. A Böngészők továbbítják az User Agent-et a webszervernek, amely leírja a kliens hardver platformját, az operációs rendszerét, a böngésző típusát és verzióját valamint a nyelvi beállításait.
Böngésző adatai
Legegyszerűbben JavaScript segítségével tudunk hozzájutni ezekhez az adatokhoz. Méghozzá a navigator objektum alkalmazásával nyerhetjük ki a megfelelő adatokat. Mindez akkor hasznos, ha ezeket felhasználjuk JavaScript programjaink írásakor, hiszen az eltérő JavaScript parancsértelmezés miatt problémáink adódhatnak a fejlesztés során, amit így könnyebb lekezelni.
A navigator objektum elemváltozóit és elemfüggvényeit közvetlenül megszólíthatjuk.
Nézzük az egyes elemeket:
- appCodeName – A böngésző becenevét adja vissza.
- appName – A böngésző neve
- appVersion – A böngésző verziószáma
- platform – A felhasználó gépén telepített operációs rendszer
- cookieEnabled – Cooki engedélyezett-e vagy sem
- userAgent – A böngésző fontosabb adatai
Lássunk erre egy egyszerű példát:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Browser and User information</title>
<meta charset="UTF-8">
</head>
<body>
<header><h1>Böngésző</h1>
</header>
<div id="browser"></div>
<!- Böngésző paraméterek lekérdezése -->
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent: " + navigator.userAgent + "</p>";
document.getElementById("browser").innerHTML=txt;
</script>
</body>
</html>
A működő kód itt elérhető/kipróbálható.
IP cím lekérdezése
Ha megnézitek, látható, hogy meglehetősen sok információ kinyerhető egy nem túl bonyolult kód segítségével. Ha ezt a JSON Api segítségével egy picit felturbózzuk, akkor a látogatónk IP címe is lekérhetővé válik. Nem részletezném – hiszen tudja mindenki nagyon jól-, hogy az IP cím az Interneten a digitális ujjlenyomatunk. Ennek felhasználásával számos információ szerezhető meg a felhasználóról, a tartózkodási helyétől kezdve, a szolgáltatójának adatai, stb.
Lássuk hogy is néz ki a kibővített kódunk:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Browser and User information</title>
<meta charset="UTF-8">
</head>
<body>
<header><h1>Böngésző</h1>
</header>
<div id="browser"></div>
<!- Böngésző paraméterek lekérdezése -->
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent: " + navigator.userAgent + "</p>";
document.getElementById("browser").innerHTML=txt;
</script>
<!- Ip cím lekérése a json api segítségével -->
<script type="text/javascript">
window.onload = function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jsonip.appspot.com/?callback=DisplayIP";
document.getElementsByTagName("head")[0].appendChild(script);
};
function DisplayIP(response) {
document.getElementById("ipaddress").innerHTML = "Your IP Address is " + response.ip;
}
</script>
<div id="ipaddress"></div>
</body>
</html>
A működő kód itt elérhető/kipróbálható. What is My IP?
A következő részben megnézzük, hogy a HTML5 Geolokáció tekintetében milyen eszközökkel lát el minket. Ne haragudjatok, ha valaki számára elcsépelt volt ez a post, de az összehasonlítás jobban megmutatja, hogy a HTML5 mire is képes valójában.
Geolokáció bevezetés a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.
