mirror of
https://github.com/faisalman/ua-parser-js.git
synced 2025-09-27 07:58:45 +03:00
329 lines
11 KiB
HTML
329 lines
11 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>UAParser.js - Lightweight JavaScript-based User Agent String Parser</title>
|
|
<meta charset="utf-8">
|
|
<meta name="author" content="Faisalman" />
|
|
<meta name="description" content="UAParser.js - JavaScript library to detect browser, engine, OS, CPU, and device type/model from userAgent string. Supports browser & node.js environment. Also available as jQuery/Zepto plugin, Bower/Meteor package, RequireJS/AMD module, & CLI tool." />
|
|
<meta name="keywords" content="browser detection, user agent, parser, javascript, detect, details, new, browser, engine, mobile, device, operating system" />
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css?family=Lekton");
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Lekton", Helvetica, Ubuntu, Arial, Georgia, sans-serif;
|
|
}
|
|
html, input, select {
|
|
font: 14px/20px Helvetica, Ubuntu, Arial, Georgia, sans-serif;
|
|
color: #333;
|
|
}
|
|
body {
|
|
background: #000;
|
|
margin: 0 auto;
|
|
width: 960px;
|
|
}
|
|
header, section, footer {
|
|
position: relative;
|
|
}
|
|
header {
|
|
padding: 50px 0 20px 0;
|
|
background-color: #000;
|
|
color: #fff;
|
|
}
|
|
section {
|
|
background-color: #fff;
|
|
}
|
|
section.test {
|
|
color: #fff;
|
|
background-color: #000;
|
|
}
|
|
footer {
|
|
background-color: #000;
|
|
color: #fff;
|
|
padding: 20px 0;
|
|
}
|
|
footer a {
|
|
color: #fff;
|
|
}
|
|
h1 a {
|
|
text-decoration: none;
|
|
color: #fff;
|
|
}
|
|
h1 {
|
|
margin-bottom: 30px;
|
|
font-size: 4em;
|
|
}
|
|
h2 {
|
|
font-size: 1.2em;
|
|
}
|
|
.share {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 20px;
|
|
top: 60px;
|
|
right: 0;
|
|
}
|
|
pre {
|
|
font-size: 1em;
|
|
padding: 10px;
|
|
white-space: pre-wrap;
|
|
overflow: auto;
|
|
line-height: 2em;
|
|
}
|
|
table {
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
}
|
|
th {
|
|
font-size: 2em;
|
|
}
|
|
th, td {
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
}
|
|
td {
|
|
font-size: 1.2em;
|
|
color: #333;
|
|
}
|
|
select, input, .grey {
|
|
color: #777;
|
|
width: 95%;
|
|
}
|
|
select, input {
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
height: 40px;
|
|
width: 100%;
|
|
}
|
|
hr {
|
|
border: 0;
|
|
margin: 20px 0;
|
|
}
|
|
p {
|
|
margin: 10px 0;
|
|
font-size: 1em;
|
|
line-height: 1.5em;
|
|
}
|
|
.ua {
|
|
font-size: 1.5em;
|
|
}
|
|
.uastring {
|
|
background-color: #33332D;
|
|
color: #f0f0f0;
|
|
font-weight: bold;
|
|
padding: 5px 10px;
|
|
}
|
|
</style>
|
|
<script src="src/ua-parser-demo.js"></script>
|
|
<script src="ua-list-example.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1><a href="https://faisalman.github.io/ua-parser-js">UAParser.js</a></h1>
|
|
<h2 trans-key="description">JavaScript-based User-Agent String Parser</h2>
|
|
</header>
|
|
<section class="result">
|
|
<pre>
|
|
</pre>
|
|
<table>
|
|
<tr>
|
|
<th trans-key="browser">Browser</th>
|
|
<th trans-key="engine">Engine</th>
|
|
<th trans-key="os">OS</th>
|
|
<th trans-key="device">Device</th>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
<section class="test">
|
|
<p trans-key="pick_one_label">Pick one user agent to be tested:</p>
|
|
<select>
|
|
<option trans-key="pick_one_text">Pick one example</option>
|
|
</select>
|
|
<p trans-key="enter_user_agent_string">Or enter any user-agent string you want to test here:</p>
|
|
<input type="text" />
|
|
</section>
|
|
<footer>
|
|
<p>
|
|
<span class="ua">UAParser.js</span> © 2012-2020 Faisal Salman. <br/>
|
|
<span trans-key="license">Dual licensed under MIT license</span><br/>
|
|
<span trans-key="source_and_docs">Source & Docs</span>: <a href="https://github.com/faisalman/ua-parser-js">https://github.com/faisalman/ua-parser-js</a><br/>
|
|
<span trans-key="nodejs_package">NPM package</span>: <a href="https://npmjs.org/package/ua-parser-js">https://npmjs.org/package/ua-parser-js</a><br/>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="?lang=en">English</a> |
|
|
<a href="?lang=fr">Français</a>
|
|
</p>
|
|
</footer>
|
|
<script>
|
|
var pre = document.getElementsByTagName('pre')[0];
|
|
var sel = document.getElementsByTagName('select')[0];
|
|
var txt = document.getElementsByTagName('input')[0];
|
|
var parser = new UAParser();
|
|
var fill = function(el, prop){
|
|
if(typeof prop === 'object'){
|
|
el.innerHTML = '';
|
|
el.appendChild(prop);
|
|
} else if(typeof prop === 'string'){
|
|
el.innerHTML = prop;
|
|
} else {
|
|
el.innerHTML = "-";
|
|
}
|
|
};
|
|
var imgMap = function(prop, dir, key, arr){
|
|
var img = document.createElement('img');
|
|
img.src = 'images/undefined.png';
|
|
img.width = 64;
|
|
img.height = 64;
|
|
for(var i in arr){
|
|
if(arr.hasOwnProperty(i)){
|
|
var isobj = typeof arr[i] === 'object';
|
|
var r = isobj ? new RegExp(arr[i][0], 'i') : new RegExp(arr[i], 'i');
|
|
if(r.test(prop[key]) && dir!='engine'){
|
|
img.src = 'images/'+dir+'/'+(isobj?arr[i][1]:arr[i])+'.png';
|
|
return img;
|
|
} else if(prop[key] !== undefined){
|
|
img.src = 'images/check.png';
|
|
}
|
|
}
|
|
}
|
|
img.onerror = function() {
|
|
this.src = 'images/check.png';
|
|
this.onerror = null;
|
|
};
|
|
return img;
|
|
};
|
|
for(var i = 0; i < uaExampleList.length; i++){
|
|
var opt = document.createElement('option');
|
|
opt.innerHTML = uaExampleList[i];
|
|
sel.appendChild(opt);
|
|
}
|
|
var fillTable = function(uastring){
|
|
if(uastring) parser.setUA(uastring);
|
|
var browser = parser.getBrowser();
|
|
var engine = parser.getEngine();
|
|
var os = parser.getOS();
|
|
var device = parser.getDevice();
|
|
var tbl = document.getElementsByTagName('td');
|
|
var prop = [
|
|
imgMap(browser, 'browser', 'name', [['ie', 'internet-explorer-tile'], 'chrome', 'chromium', 'konqueror', 'safari', 'opera', 'firefox', 'fennec', 'mozilla', 'midori', 'arora', 'camino', 'iceweasel', 'flock', 'avant', 'baidu', 'dolphin', 'epiphany', ['icab', 'icab-mobile'], 'iceape', 'icecat', ['lunascape', 'ilunascape-android'], 'maxthon', ['netscape', 'netscape_4-6'], 'netsurf', 'omniweb', ['qqbrowser', 'qq'], 'rockmelt', 'rekonq', 'seamonkey', ['silk', 'silk_1'], ['skyfire', 'skyfire-ios'], ['ucbrowser', 'uc'], ['uc browser', 'uc'], 'yandex']),
|
|
imgMap(engine, 'engine', 'name', [['trident', 'ie'], ['webkit', 'safari'], ['khtml', 'konqueror'], ['presto', 'opera'], ['gecko', 'mozilla']]),
|
|
imgMap(os, 'os', 'name', ['meego', 'symbian', 'android', 'blackberry', 'bada', ['windows phone os', 'winphone'], 'windows', 'chromium', 'mac', 'freebsd', 'bsd', 'kubuntu', 'xubuntu', 'lubuntu', 'ubuntu', 'gentoo', 'fedora', 'mandriva', 'redhat', 'suse', 'debian', 'slackware', 'arch', 'linux', 'solaris', 'webos', 'centos', 'pclinuxos', ['ios', 'mac'], ['rim', 'blackberry'], 'qnx', 'gnu', 'playstation', 'wii', 'xbox', 'unix']),
|
|
imgMap(device, 'device', 'type', [['undefined', 'pc'], 'console', 'tablet', ['mobile', 'phone'], ['smarttv', 'tv']]),
|
|
browser.name, engine.name, os.name, device.vendor,
|
|
browser.version, engine.version, os.version, device.model];
|
|
for(var i = 0; i < prop.length; i++){
|
|
fill(tbl[i], prop[i]);
|
|
}
|
|
pre.innerHTML = trans('result_for') + ' <span class="uastring">' + (uastring ? uastring.replace(/</g,'<') : navigator.userAgent + '</span><span> (' + trans('user_agent_string') + ')') + '</span> :';
|
|
}
|
|
fillTable();
|
|
var select = function(){
|
|
fillTable(sel.children[sel.selectedIndex].value);
|
|
};
|
|
var enter = function(e){
|
|
if(e.keyCode == 13){
|
|
fillTable(this.value);
|
|
return false;
|
|
}
|
|
};
|
|
if (window.addEventListener) {
|
|
sel.addEventListener('change', select);
|
|
txt.addEventListener('keydown', enter);
|
|
} else {
|
|
sel.attachEvent('onchange', select);
|
|
txt.attachEvent('onkeydown', enter);
|
|
}
|
|
|
|
var forEach = function (array, callback, scope) {
|
|
for (var i = 0; i < array.length; i++) {
|
|
callback.call(scope, i, array[i]); // passes back stuff we need
|
|
}
|
|
};
|
|
|
|
|
|
function getTranslations() {
|
|
var translations = {
|
|
en: {
|
|
result_for: 'Result for',
|
|
user_agent_string: 'your browser',
|
|
},
|
|
fr: {
|
|
description: 'Parseur léger de chaine "User-Agent" en JavaScript',
|
|
result_for: 'Résultat pour',
|
|
user_agent_string: 'Chaine "User-Agent"',
|
|
browser: 'Navigateur',
|
|
engine: 'Moteur',
|
|
os: 'Système d\'exploitation',
|
|
device: 'Appareil',
|
|
enter_user_agent_string: 'Entrez une chaine de "User-Agent" à tester:',
|
|
pick_one_label: 'Sélectionner un "User-Agent" à tester',
|
|
pick_one_text: 'Sélectionner',
|
|
license: 'Double license GPLv2 & MIT',
|
|
source_and_docs: 'Source et doc',
|
|
nodejs_package: 'Package Node.js',
|
|
}
|
|
};
|
|
|
|
return translations;
|
|
}
|
|
|
|
function trans(key) {
|
|
var matchLang = location.search.match(/lang=([a-z]+)/);
|
|
var queryLang = matchLang ? matchLang[1] : null;
|
|
var locale = queryLang || navigator.language || navigator.userLanguage;
|
|
var translations = getTranslations();
|
|
|
|
if (!translations) {
|
|
return null;
|
|
}
|
|
|
|
if (!translations[locale]) {
|
|
locale = 'en';
|
|
}
|
|
|
|
var localeTranslations = translations[locale];
|
|
return localeTranslations && localeTranslations[key];
|
|
}
|
|
|
|
var transKeys = document.querySelectorAll('[trans-key]');
|
|
|
|
forEach(transKeys, function (index, value) {
|
|
var transKey = value.getAttribute('trans-key');
|
|
var translatedText = trans(transKey);
|
|
|
|
if (translatedText) {
|
|
value.innerHTML = translatedText;
|
|
}
|
|
});
|
|
</script>
|
|
<script type="text/javascript">
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-3767301-5']);
|
|
_gaq.push(['_trackPageview']);
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|