mirror of
https://github.com/faisalman/ua-parser-js.git
synced 2025-09-27 16:08:47 +03:00
189 lines
5.7 KiB
HTML
189 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>UA-Parser.js - JavaScript-based User-Agent Parser</title>
|
|
<meta name="author" content="Faisalman" />
|
|
<meta name="description" content="Lightweight JavaScript-based user-agent parser" />
|
|
<meta name="keywords" content="user agent, parser, javascript, detect, details, new, browser, engine, mobile, device, operating system" />
|
|
<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html, input, select {
|
|
font: 14px/20px Georgia, Helvetica, Ubuntu, Arial, sans-serif;
|
|
background: #f0f0f0;
|
|
color: #333;
|
|
}
|
|
body {
|
|
background: #fff;
|
|
margin: 0 auto;
|
|
padding: 50px 20px 20px;
|
|
width: 960px;
|
|
text-align: center;
|
|
}
|
|
header, section, footer {
|
|
padding: 20px 0 0;
|
|
position: relative;
|
|
}
|
|
h1 {
|
|
margin-bottom: 30px;
|
|
font-size: 4em;
|
|
}
|
|
h1, h2, th, .ua {
|
|
font-family: 'Dancing Script', Helvetica, Ubuntu, Arial, sans-serif;
|
|
}
|
|
.share {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 20px;
|
|
top: 60px;
|
|
right: 0;
|
|
}
|
|
pre {
|
|
margin: 0 0 20px;
|
|
padding: 10px;
|
|
background: #ccc;
|
|
white-space: pre-wrap;
|
|
overflow: auto;
|
|
}
|
|
table {
|
|
border-spacing: 0;
|
|
margin: auto;
|
|
width: 100%;
|
|
}
|
|
th {
|
|
font-size: 2em;
|
|
}
|
|
th, td {
|
|
border-left: 1px solid #ccc;
|
|
border-top: 1px solid #ccc;
|
|
min-width: 100px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
tr:last-child th, tr:last-child td {
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
th:last-child, td:last-child {
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
td {
|
|
color: red;
|
|
}
|
|
select, input, .grey {
|
|
color: #777;
|
|
width: 100%;
|
|
}
|
|
input {
|
|
border: 1px solid #ccc;
|
|
height: 30px;
|
|
box-shadow: inset 0 0 10px #ccc;
|
|
}
|
|
hr {
|
|
margin: 20px 0;
|
|
}
|
|
p {
|
|
margin: 10px 0;
|
|
}
|
|
.ua {
|
|
font-size: 1.5em;
|
|
}
|
|
</style>
|
|
<script src="ua-parser.js"></script>
|
|
<script src="ua-list-example.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>UA-Parser.js</h1>
|
|
<h2>JavaScript-based User-Agent Parser</h2>
|
|
<hr />
|
|
<p class="grey">A small, quick & dirty script, which aims to extract a long piece of information about the details of the system contained in a user-agent string, into some small yet valuable pieces of commonly needed information such as the name of the browser & operating system along with the version</p>
|
|
<p class="share">
|
|
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="fyzlman">Tweet</a>
|
|
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
|
</p>
|
|
</header>
|
|
<section>
|
|
<pre>
|
|
</pre>
|
|
<table>
|
|
<tr>
|
|
<th>Browser</th>
|
|
<th>Engine</th>
|
|
<th>OS</th>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
<section>
|
|
<p><span class="ua">Select</span> a user-agent string to be tested:</p>
|
|
<select>
|
|
<option>Pick one</option>
|
|
</select>
|
|
<p>or <span class="ua">Enter</span> any user-agent string you want to test here:</p>
|
|
<input type="text" />
|
|
</section>
|
|
<footer>
|
|
<hr />
|
|
<p>
|
|
<span class="ua">UA-Parser.js</span> © 2012 Faisalman. Licensed under GPLv2. Download & Fork @
|
|
<a href="https://github.com/faisalman/ua-parser-js">https://github.com/faisalman/ua-parser-js</a>
|
|
</p>
|
|
</footer>
|
|
<script>
|
|
var pre = document.getElementsByTagName('pre')[0];
|
|
var sel = document.getElementsByTagName('select')[0];
|
|
var txt = document.getElementsByTagName('input')[0];
|
|
for(var i = 0; i < uaExampleList.length; i++){
|
|
var opt = document.createElement('option');
|
|
opt.innerText = uaExampleList[i];
|
|
sel.appendChild(opt);
|
|
}
|
|
var fillTable = function(uastring){
|
|
var parser = new uaparser(uastring);
|
|
var browser = parser.getBrowser();
|
|
var engine = parser.getEngine();
|
|
var os = parser.getOS();
|
|
var tbl = document.getElementsByTagName('td');
|
|
tbl[0].innerText = browser.name;
|
|
tbl[1].innerText = engine.name;
|
|
tbl[2].innerText = os.name;
|
|
tbl[3].innerText = browser.version;
|
|
tbl[4].innerText = engine.version;
|
|
tbl[5].innerText = os.version;
|
|
pre.innerHTML = 'Result for <strong>' + (uastring ? uastring.replace(/</g,'<') : 'your browser\'s user-agent string') + ' :</strong>';
|
|
}
|
|
fillTable();
|
|
sel.addEventListener('change', function(){
|
|
fillTable(sel.children[sel.selectedIndex].value);
|
|
});
|
|
txt.addEventListener('keydown', function(e){
|
|
if(e.keyCode == 13){
|
|
fillTable(this.value);
|
|
return false;
|
|
}
|
|
});
|
|
</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>
|