1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">jQuery.browser</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/properties/" title="View all posts in Properties">Properties</a> > <a href="http://api.jquery.com/category/properties/global-jquery-object-properties/" title="View all posts in Properties of the Global jQuery Object">Properties of the Global jQuery Object</a></span> | <span class="category"><a href="http://api.jquery.com/category/utilities/" title="View all posts in Utilities">Utilities</a></span>
</div>
</div>
<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li><a href="#jQuery-browser1">jQuery.browser </a></li>
<li><a href="#jQuery-browser-version2">jQuery.browser.version </a></li>
</ul>
</div>
<div id="jQuery-browser1" class="entry property">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.browser</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Map">Map</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Contains flags for the useragent, read from navigator.userAgent. We recommend against using this property; please try to use feature detection instead (see jQuery.support). jQuery.browser may be moved to a plugin in a future release of jQuery. </p>
<ul class="signatures"><li class="signature" id="jQuery-browser"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>jQuery.browser</h4></li></ul>
<div class="longdesc">
<p>The <code>$.browser</code> property provides information about the web browser that is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information.</p>
<p>Available flags are:</p>
<ul>
<li>webkit (as of jQuery 1.4)</li>
<li>safari (deprecated)</li>
<li>opera</li>
<li>msie</li>
<li>mozilla</li>
</ul>
<p>This property is available immediately. It is therefore safe to use it to determine whether or not to call <code>$(document).ready()</code>.
The <code>$.browser</code> property is deprecated in jQuery 1.3, and its functionality may be moved to a team-supported plugin in a future release of jQuery.</p>
<p>Because <code>$.browser</code> uses <code>navigator.userAgent</code> to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. The <code><a href="http://api.jquery.com/jQuery.support/">$.support</a></code> property is available for detection of support for particular features rather than relying on <code>$.browser</code>. </p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Show the browser info.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
p { color:green; font-weight:bolder; margin:3px 0 0 10px; }
div { color:blue; margin-left:20px; font-size:14px; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>Browser info:</p>
<script>
jQuery.each(jQuery.browser, function(i, val) {
$("<div>" + i + " : <span>" + val + "</span>")
.appendTo( document.body );
});</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Returns true if the current useragent is some version of Microsoft's Internet Explorer.</span>
</h4>
<pre class="prettyprint"><code class="example">
$.browser.msie;
</code></pre>
</div>
<div id="example-2">
<h4>Example: <span class="desc">Alerts "this is WebKit!" only for WebKit browsers</span>
</h4>
<pre class="prettyprint"><code class="example">
if ($.browser.webkit) {
alert( "this is webkit!" );
}
</code></pre>
</div>
<div id="example-3">
<h4>Example: <span class="desc">Alerts "Do stuff for Firefox 3" only for Firefox 3 browsers.</span>
</h4>
<pre class="prettyprint"><code class="example">
var ua = $.browser;
if ( ua.mozilla && ua.version.slice(0,3) == "1.9" ) {
alert( "Do stuff for firefox 3" );
}
</code></pre>
</div>
<div id="example-4">
<h4>Example: <span class="desc">Set a CSS property that's specific to a particular browser.</span>
</h4>
<pre class="prettyprint"><code class="example">
if ( $.browser.msie ) {
$("#div ul li").css( "display","inline" );
} else {
$("#div ul li").css( "display","inline-table" );
}
</code></pre>
</div>
</div>
</div>
</div>
<div id="jQuery-browser-version2" class="entry property">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.browser.version</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#String">String</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>The version number of the rendering engine for the user's browser.</p>
<ul class="signatures"><li class="signature" id="jQuery-browser-version"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.1.3/">1.1.3</a></span>jQuery.browser.version</h4></li></ul>
<div class="longdesc">
<p>Here are some typical results:</p>
<ul>
<li>Internet Explorer: 6.0, 7.0, 8.0</li>
<li>Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9</li>
<li>Opera: 10.06, 11.01</li>
<li>Safari/Webkit: 312.8, 418.9</li>
</ul>
<p>Note that IE8 claims to be 7 in Compatibility View.</p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples-1">
<div id="example-1-0">
<h4>Example: <span class="desc">Returns the version number of the rendering engine used by the user's current browser. For example, FireFox 4 returns 2.0 (the version of the Gecko rendering engine it utilizes).</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:20px; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p></p>
<script>
$("p").html( "The version number of the rendering engine your browser uses is: <span>" +
$.browser.version + "</span>" );
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1-1">
<h4>Example: <span class="desc">Alerts the version of IE's rendering engine that is being used:</span>
</h4>
<pre class="prettyprint"><code class="example">
if ( $.browser.msie ) {
alert( $.browser.version );
}
</code></pre>
</div>
<div id="example-1-2">
<h4>Example: <span class="desc">Often you only care about the "major number," the whole number, which you can get by using JavaScript's built-in parseInt() function:</span>
</h4>
<pre class="prettyprint"><code class="example">
if ( $.browser.msie ) {
alert( parseInt($.browser.version, 10) );
}
</code></pre>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
