blocks|key|692260|text|下面是Safari+3.0%2B的标识，并与Chrome区分开来：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692261|isSafari+=+!!navigator.userAgent.match(/Version\/[\d\.]%2B.*Safari/)|code-block|syntax|javascript|692262|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The following identifies Safari 3.0+ and distinguishes it from Chrome:

<pre class="lang-js prettyprint-override"><code>isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
</code></pre>

blocks|key|908325|text|不幸的是，上面的例子也会检测到android的默认浏览器是Safari，而不是Safari。我使用了navigator.userAgent.indexOf('Safari')+!=+-1+&&+navigator.userAgent.indexOf('Chrome')+==+-1+&&++navigator.userAgent.indexOf('Android')+==+-1|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|908326|entityMap^0|1E|3V|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

unfortunately the above examples will also detect android's default browser as Safari, which it is not.
I used 
<code>navigator.userAgent.indexOf('Safari') != -1 &amp;&amp; navigator.userAgent.indexOf('Chrome') == -1 &amp;&amp; navigator.userAgent.indexOf('Android') == -1</code>

blocks|key|908176|text|在检查Safari时，我使用了以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|908177|$.browser.safari+=+($.browser.webkit+&&+!(/chrome/.test(navigator.userAgent.toLowerCase())));
if+($.browser.safari)+{
++++alert('this+is+safari');
}|code-block|syntax|javascript|908178|它工作正常。|908179|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For checking Safari I used this:

<pre><code>$.browser.safari = ($.browser.webkit &amp;&amp; !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
 alert('this is safari');
}
</code></pre>

It works correctly.

blocks|key|908126|text|显然，唯一可靠且被接受的解决方案是像这样进行特征检测：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|908127|browser_treats_urls_like_safari_does+=+false;
var+last_location_hash+=+location.hash;
location.hash+=+'"blah"';
if+(location.hash+==+'#%2522blah%2522')
++++browser_treats_urls_like_safari_does+=+true;
location.hash+=+last_location_hash;|code-block|syntax|javascript|908128|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Apparently the only reliable and accepted solution would be to do feature detection like this:

<pre><code>browser_treats_urls_like_safari_does = false;
var last_location_hash = location.hash;
location.hash = '"blah"';
if (location.hash == '#%22blah%22')
 browser_treats_urls_like_safari_does = true;
location.hash = last_location_hash;
</code></pre>

blocks|key|908521|text|我找到的唯一方法是检查navigator.userAgent是否包含iPhone或iPad+word|type|unstyled|depth|inlineStyleRanges|entityRanges|data|908522|if+(navigator.userAgent.toLowerCase().match(/(ipad%7Ciphone)/))+{
++++//is+safari
}|code-block|syntax|javascript|908523|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The only way I found is check if navigator.userAgent contains iPhone or iPad word

<pre><code>if (navigator.userAgent.toLowerCase().match(/(ipad|iphone)/)) {
 //is safari
}
</code></pre>

blocks|key|691985|text|如果您正在检查浏览器，请使用$.browser。但是，如果您正在检查功能支持(推荐)，则使用$.support。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|691986|您不应使用$.browser来启用/禁用页面上的功能。原因是它不可靠，通常不推荐。|691987|如果你需要特性支持，那么我推荐modernizr。|691988|entityMap|0|LINK|mutability|MUTABLE|url|http://www.modernizr.com/^0|E|9|1A|9|0|0|F|9|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

If you are checking the browser use <code>$.browser</code>. But if you are checking feature support (recommended) then use <code>$.support</code>.

You should NOT use $.browser to enable/disable features on the page. Reason being its not dependable and generally just not recommended.

If you need feature support then I recommend <a href="http://www.modernizr.com/" rel="nofollow">modernizr</a>.

blocks|key|692399|text|//Check+if+Safari
++function+isSafari()+{
++++++return+/%5E((?!chrome).)*safari/i.test(navigator.userAgent);
++}
//Check+if+MAC
+++++if(navigator.userAgent.indexOf('Mac')>1){
++++++++alert(isSafari());
+++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|692400|http://jsfiddle.net/s1o943gb/10/|unstyled|offset|length|692401|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|W|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Q|8|@]|9|@$G|R|H|S|1|T]]|A|$]]|$1|I|3|-4|5|F|7|U|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|E]]]]

<pre><code>//Check if Safari
 function isSafari() {
 return /^((?!chrome).)*safari/i.test(navigator.userAgent);
 }
//Check if MAC
 if(navigator.userAgent.indexOf('Mac')&gt;1){
 alert(isSafari());
 }
</code></pre>

<a href="http://jsfiddle.net/s1o943gb/10/" rel="nofollow">http://jsfiddle.net/s1o943gb/10/</a>

blocks|key|692518|text|这将决定浏览器是否为Safari。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692519|if(navigator.userAgent.indexOf('Safari')+!=-1+&&+navigator.userAgent.indexOf('Chrome')+==+-1)
{
++++alert(its+safari);
}else+{
++++alert('its+not+safari');
}|code-block|syntax|javascript|692520|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This will determine whether the browser is Safari or not.

<pre><code>if(navigator.userAgent.indexOf('Safari') !=-1 &amp;&amp; navigator.userAgent.indexOf('Chrome') == -1)
{
 alert(its safari);
}else {
 alert('its not safari');
}
</code></pre>

blocks|key|908648|text|我用来检测苹果浏览器引擎，这个简单的JavaScript条件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|908649|+navigator.vendor.startsWith('Apple')|code-block|syntax|javascript|908650|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I use to detect Apple browser engine, this simple JavaScript condition:

<pre><code> navigator.vendor.startsWith('Apple')
</code></pre>

blocks|key|692336|text|泛型函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692337|+var+getBrowseActive+=+function+(browserName)+{
+++return+navigator.userAgent.indexOf(browserName)+>+-1;
+};|code-block|syntax|javascript|692338|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Generic FUNCTION

<pre><code> var getBrowseActive = function (browserName) {
 return navigator.userAgent.indexOf(browserName) &gt; -1;
 };
</code></pre>

blocks|key|692384|text|解决这个问题的一个非常有用的方法是检测浏览器的webkit版本，并检查它是否至少是我们需要的版本，否则就做其他的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692385|使用jQuery，它是这样的：|692386|"use+strict";

$(document).ready(function()+{
++++var+appVersion++++++++++++++++++=+navigator.appVersion;
++++var+webkitVersion_positionStart+=+appVersion.indexOf("AppleWebKit/")+%2B+12;
++++var+webkitVersion_positionEnd+++=+webkitVersion_positionStart+%2B+3;
++++var+webkitVersion+++++++++++++++=+appVersion.slice(webkitVersion_positionStart,+webkitVersion_positionEnd);
	
++++console.log(webkitVersion);

++++if+(webkitVersion+<+537)+{
++++++++console.log("webkit+outdated.");
++++}+else+{
++++++++console.log("webkit+ok.");
++++};
});|code-block|syntax|javascript|692387|​|692388|这为处理浏览器的不同webkit实现的问题提供了一个安全和永久的修复。|692389|祝你编码愉快！|692390|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

A very useful way to fix this is to detect the browsers webkit version and check if it is at least the one we need, else do something else.

Using jQuery it goes like this:<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";

$(document).ready(function() {
 var appVersion = navigator.appVersion;
 var webkitVersion_positionStart = appVersion.indexOf("AppleWebKit/") + 12;
 var webkitVersion_positionEnd = webkitVersion_positionStart + 3;
 var webkitVersion = appVersion.slice(webkitVersion_positionStart, webkitVersion_positionEnd);
	
 console.log(webkitVersion);

 if (webkitVersion &lt; 537) {
 console.log("webkit outdated.");
 } else {
 console.log("webkit ok.");
 };
});</code></pre>
</div>
</div>


This provides a safe and permanent fix for dealing with problems with browser's different webkit implementations.

Happy coding!

blocks|key|692533|text|++++//+Safari+uses+pre-calculated+pixels,+so+use+this+feature+to+detect+Safari
++++var+canva+=+document.createElement('canvas');
++++var+ctx+=+canva.getContext("2d");
++++var+img+=+ctx.getImageData(0,+0,+1,+1);
++++var+pix+=+img.data;+++++//+byte+array,+rgba
++++var+isSafari+=+(pix[3]+!=+0);+++//+alpha+in+Safari+is+not+zero|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|692534|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> // Safari uses pre-calculated pixels, so use this feature to detect Safari
 var canva = document.createElement('canvas');
 var ctx = canva.getContext("2d");
 var img = ctx.getImageData(0, 0, 1, 1);
 var pix = img.data; // byte array, rgba
 var isSafari = (pix[3] != 0); // alpha in Safari is not zero
</code></pre>

blocks|key|692623|text|我的最佳解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|692624|function+getBrowserInfo()+{
++const+ua+=+navigator.userAgent;+let+tem;
++let+M+=+ua.match(/(opera%7Cchrome%7Csafari%7Cfirefox%7Cmsie%7Ctrident(?=\/))\/?\s*(\d%2B)/i)+%7C%7C+[];
++if+(/trident/i.test(M[1]))+{
++++tem+=+/\brv[+:]%2B(\d%2B)/g.exec(ua)+%7C%7C+[];
++++return+{+name:+'IE+',+version:+(tem[1]+%7C%7C+'')+};
++}
++if+(M[1]+===+'Chrome')+{
++++tem+=+ua.match(/\bOPR\/(\d%2B)/);
++++if+(tem+!=+null)+{
++++++return+{+name:+'Opera',+version:+tem[1]+};
++++}
++}
++M+=+M[2]+?+[M[1],+M[2]]+:+[navigator.appName,+navigator.appVersion,+'-?'];
++tem+=+ua.match(/version\/(\d%2B)/i);
++if+(tem+!=+null)+{
++++M.splice(1,+1,+tem[1]);
++}
++return+{
++++name:+M[0],
++++version:+M[1],
++};
}

getBrowserInfo();|code-block|syntax|javascript|692625|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My best solution
<pre><code>function getBrowserInfo() {
 const ua = navigator.userAgent; let tem;
 let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
 if (/trident/i.test(M[1])) {
 tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
 return { name: 'IE ', version: (tem[1] || '') };
 }
 if (M[1] === 'Chrome') {
 tem = ua.match(/\bOPR\/(\d+)/);
 if (tem != null) {
 return { name: 'Opera', version: tem[1] };
 }
 }
 M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
 tem = ua.match(/version\/(\d+)/i);
 if (tem != null) {
 M.splice(1, 1, tem[1]);
 }
 return {
 name: M[0],
 version: M[1],
 };
}

getBrowserInfo();
</code></pre>

Though both are Webkit based browsers, Safari urlencodes quotation marks in the URL while Chrome does not.

Therefore I need to distinguish between these two in JS.

<a href="http://api.jquery.com/jQuery.browser/" rel="noreferrer">jQuery's browser detection docs</a> mark "safari" as deprecated.

Is there a better method or do I just stick with the deprecated value for now?

Detect Safari using jQuery

Android

jQuery

虽然两者都是基于Webkit的浏览器，但Safari对URL中的引号进行了编码，而Chrome则不是。因此，我需要在JS中区分这两者。将"safari“标记为已弃用。有没有更好的方法，或者我现在只使用弃用的值？

问使用jQuery检测Safari
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery检测SafariEN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery检测Safari
EN