如何检测Safari浏览器使用JavaScript?我尝试了下面的代码，它不仅检测Safari浏览器，而且还检测Chrome浏览器。
function IsSafari() {
var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
return is_safari;
}
你可以很容易地使用索引的Chrome过滤Chrome:
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
alert("1") // Chrome
} else {
alert("2") // Safari
}
}
此代码仅用于检测safari浏览器
if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0)
{
alert("Browser is Safari");
}
注意:总是尝试检测您试图修复的特定行为，而不是针对它与isSafari?
作为最后的手段，用下面的正则表达式检测Safari:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
它使用负环视，排除Chrome、Edge和所有在用户代理中包含Safari名称的Android浏览器。
正如其他人已经注意到的，特性检测比检查特定浏览器更受欢迎。一个原因是用户代理字符串可以更改。另一个原因是字符串可能会在新版本中更改并破坏代码。
如果您仍然想要测试任何Safari版本，我建议使用这个
var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') == -1 &&
navigator.userAgent.indexOf('FxiOS') == -1;
这将适用于所有设备上的任何版本的Safari: Mac, iPhone, iPod, iPad。
Edit
要在当前浏览器中测试:https://jsfiddle.net/j5hgcbm2/
编辑2
根据Chrome文档更新，以正确检测iOS上的Chrome
值得注意的是，iOS上的所有浏览器都只是Safari的包装，使用相同的引擎。看到bfred。这是他在这个帖子里对自己的回答的评论。
编辑3
根据Firefox文档更新，以正确检测iOS上的Firefox
也许这样行得通:
Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor')
编辑:不再工作
我用这个
function getBrowserName() {
var name = "Unknown";
if(navigator.userAgent.indexOf("MSIE")!=-1){
name = "MSIE";
}
else if(navigator.userAgent.indexOf("Firefox")!=-1){
name = "Firefox";
}
else if(navigator.userAgent.indexOf("Opera")!=-1){
name = "Opera";
}
else if(navigator.userAgent.indexOf("Chrome") != -1){
name = "Chrome";
}
else if(navigator.userAgent.indexOf("Safari")!=-1){
name = "Safari";
}
return name;
}
if( getBrowserName() == "Safari" ){
alert("You are using Safari");
}else{
alert("You are surfing on " + getBrowserName(name));
}
为上面的答案修改正则表达式
var isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);
低温-铬 fxios - Firefox
因为chrome和safari的userAgent几乎是相同的，所以可以更容易地查看浏览器的供应商
Safari
navigator.vendor == "Apple Computer, Inc."
铬
navigator.vendor == "Google Inc."
FireFox(为什么是空的?)
navigator.vendor == ""
IE(为什么没有定义?)
navigator.vendor == undefined
只使用:
var isSafari = window.safari !== undefined;
if (isSafari) console.log("Safari, yeah!");
注意，这对于移动版本的Safari可能不可靠。
只有Safari浏览器没有Chrome浏览器:
在尝试了其他代码之后，我没有发现任何适用于新版本和旧版本Safari的代码。
最后，我做了这段代码，对我来说工作得很好:
var ua = navigator.userAgent.toLowerCase(); var isSafari = false; try { isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification); } catch(err) {} isSafari = (isSafari || ((ua.indexOf('safari') != -1)&& (!(ua.indexOf('chrome')!= -1) && (ua.indexOf('version/')!= -1)))); //test if (isSafari) { //Code for Safari Browser (Desktop and Mobile) document.getElementById('idbody').innerHTML = "This is Safari!"; } else { document.getElementById('idbody').innerHTML = "Not is Safari!"; } <body id="idbody"> </body>
我知道这个问题很老了，但我还是想把答案贴出来，因为它可能会帮助到别人。上述解决方案在某些极端情况下是失败的，所以我们必须以一种分别处理iOS、Desktop和其他平台的方式来实现它。
function isSafari() {
var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iP(ad|od|hone)/i);
var hasSafariInUa = !!ua.match(/Safari/i);
var noOtherBrowsersInUa = !ua.match(/Chrome|CriOS|OPiOS|mercury|FxiOS|Firefox/i)
var result = false;
if(iOS) { //detecting Safari in IOS mobile browsers
var webkit = !!ua.match(/WebKit/i);
result = webkit && hasSafariInUa && noOtherBrowsersInUa
} else if(window.safari !== undefined){ //detecting Safari in Desktop Browsers
result = true;
} else { // detecting Safari in other platforms
result = hasSafariInUa && noOtherBrowsersInUa
}
return result;
}
我发现只有一个词可以区分Safari——“版本”。所以这个正则表达式将完美工作:
/.*Version.*Safari.*/.test(navigator.userAgent)
这个独特的“问题”是100%的标志，浏览器是Safari(信不信由你)。
if (Object.getOwnPropertyDescriptor(Document.prototype, 'cookie').descriptor === false) {
console.log('Hello Safari!');
}
这意味着cookie对象描述符在Safari上设置为假，而在其他所有项目上设置为真，这实际上让我在其他项目上头疼。编码快乐!
我不知道为什么OP想要检测Safari，但在极少数情况下，您需要嗅探浏览器，可能更重要的是检测渲染引擎比浏览器的名称。例如，在iOS上，所有浏览器都使用Safari/Webkit引擎，所以如果底层渲染器实际上是Safari/Webkit，那么将“chrome”或“firefox”作为浏览器名称是毫无意义的。我还没有在旧的浏览器上测试这段代码，但它适用于最近的Android、iOS、OS X、Windows和Linux。
<script>
let browserName = "";
if(navigator.vendor.match(/google/i)) {
browserName = 'chrome/blink';
}
else if(navigator.vendor.match(/apple/i)) {
browserName = 'safari/webkit';
}
else if(navigator.userAgent.match(/firefox\//i)) {
browserName = 'firefox/gecko';
}
else if(navigator.userAgent.match(/edge\//i)) {
browserName = 'edge/edgehtml';
}
else if(navigator.userAgent.match(/trident\//i)) {
browserName = 'ie/trident';
}
else
{
browserName = navigator.userAgent + "\n" + navigator.vendor;
}
alert(browserName);
</script>
澄清:
iOS下的所有浏览器都会报告为“safari/webkit” 除Firefox外，Android下的所有浏览器都将报告为“chrome/blink” Chrome, Opera, Blisk, Vivaldi等在Windows, OS X或Linux下都将被报告为“Chrome /blink”
为了记录，我发现最安全的方法是实现下面答案中的浏览器检测代码的Safari部分:
const isSafari = window['safari'] && safari.pushNotification &&
safari.pushNotification.toString() === '[object SafariRemoteNotification]';
当然，如果可能的话，处理特定于浏览器的问题的最佳方法总是进行特性检测。不过，使用上面这样的一段代码仍然比代理字符串检测要好。
简单的回答是:
function isSafari() {
if (navigator.vendor.match(/[Aa]+pple/g).length > 0 )
return true;
return false;
}
我创建了一个返回布尔类型的函数:
export const isSafari = () => navigator.userAgent.toLowerCase().indexOf('safari') !== -1
用户代理嗅探非常棘手且不可靠。我们尝试着用@qingu上面的回答去检测iOS上的Safari，它在Safari, Chrome和Firefox上都运行得很好。但它错误地将Opera和Edge检测为Safari。
所以我们使用了功能检测，就像今天一样，serviceWorker只在Safari中被支持，而在iOS上的任何其他浏览器中都不支持。如https://jakearchibald.github.io/isserviceworkerready/所述
支持不包括该平台上第三方浏览器的iOS版本(参见Safari支持)。
所以我们做了一些
if ('serviceWorker' in navigator) {
return 'Safari';
}
else {
return 'Other Browser';
}
注意:未在MacOS的Safari上测试。
就我而言，我需要同时在iOS和macOS上运行Safari。这招对我很管用:
if (/apple/i.test(navigator.vendor)) {
// It's Safari
}
阅读了许多答案和帖子，并确定了最准确的解决方案。在Safari, Chrome, Firefox和Opera(桌面和iOS版本)中进行测试。首先，我们需要检测苹果供应商，然后排除Chrome, Firefox和Opera(用于iOS)。
let isSafari = navigator.vendor.match(/apple/i) &&
!navigator.userAgent.match(/crios/i) &&
!navigator.userAgent.match(/fxios/i) &&
!navigator.userAgent.match(/Opera|OPT\//);
if (isSafari) {
// Safari browser is used
} else {
// Other browser is used
}
我测试了#Christopher Martin发布的代码，它把我的浏览器报告为Chrome，因为它在测试Edge之前先测试了这一点，否则Edge会符合旨在识别Chrome的测试。我修改了他的回答，以纠正这一缺陷和其他两个缺陷，即:
Edge的缩写用户代理子字符串 MSIE的旧字符串
将代码转换为函数会产生以下通过调试控制台报告的函数和测试脚本。
<script type="text/javascript">
function BasicBrowserSniffer ( )
{
if ( navigator.userAgent.match ( /edge\//i ) ) {
return 'edge/edgehtml';
}
if ( navigator.userAgent.match ( /edg\//i ) ) {
return 'edge/edgehtml';
}
else if ( navigator.vendor.match ( /google/i ) ) {
return 'chrome/blink';
}
else if ( navigator.vendor.match ( /apple/i ) ) {
return 'safari/webkit';
}
else if ( navigator.userAgent.match ( /firefox\//i ) ) {
return 'firefox/gecko';
}
else if ( navigator.userAgent.match ( /trident\//i ) ) {
return 'ie/trident';
}
else if ( navigator.userAgent.match ( /msie\//i ) ) {
return 'ie/trident';
}
else
{
return navigator.userAgent + "\n" + navigator.vendor;
}
}; // BasicBrowserSniffer function
console.info ( 'Entering function anonymous DocumentReady function' );
console.info ( 'User Agent String = ' + navigator.userAgent.toLowerCase ( ));
console.info ( 'User Agent Vendor = ' + var uav = navigator.vendor.toLowerCase ( );
console.info ( 'BasicBrowserSniffer = ' + BasicBrowserSniffer ( ) );
console.info ( 'Leaving function anonymous DocumentReady function' );
</script>
基于@SudarP的回答。
在2021年Q3，这个解决方案将失败在Firefox (Uncaught TypeError: navigator.vendor.match(…)是null)和Chrome (Uncaught TypeError:不能读取null属性(读取'length'));
所以这里有一个固定且简短的解决方案:
function isSafari() {
return (navigator.vendor.match(/apple/i) || "").length > 0
}
检测手势变化，像这样:
const isSafari = 窗口类型。手势事件 === “函数” document.getElementById（“result”）.textContent = isSafari ？“野生动物园！” ：“不是野生动物园！” <div id=“result” style=“font-family： sans-serif”></div>
手势改变只在Safari上得到了广泛的支持(iOS上也可以)!
