在JavaScript中检测webkit浏览器？

Question

编辑：实际上，我使用了PHP来检测和创建带有php标签的本地变量。

if ( strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'webkit')) {
    $is_webkit = "true";
}

---

如何检测浏览器是否基于Webkit? (Google Chrome, 较新版本Opera, Safari);

我尝试了以下代码:

var isWebkit = (window.webkitURL != null);
if(isWebkit){
    alert("i am a webkit based browser!");
}

不支持Safari浏览器

- John Black

---

YUNO能否使用特征检测，而不是引擎嗅探？ - Fabrício Matté

请看这里：https://dev59.com/fGcs5IYBdhLWcg3wu2Up - sushain97

你想检查 navigator.userAgent。 - ama2

Answer 1

这个解决方案非常简单。

if(navigator.userAgent.indexOf('AppleWebKit') != -1){
    //this is webkit!
}

AppleWebKit是webkit渲染引擎的名称，因此每个基于webkit的浏览器都必须包含此字符串。

MDN有关浏览器检测和用户代理的页面

但是，如果您需要可信赖的有关用户浏览器引擎的信息，您可能想使用以下内容：

if(typeof window.webkitConvertPointFromNodeToPage === 'function'){
    // this is webkit (really it is)
}

说明：userAgent属性很容易被欺骗，因此检查特定属性是一种更好的方法。但它并不是完美无缺的，早期版本的Safari（4.0之前）没有这样的属性。Chrome从第一个版本开始支持webkitConvertPointFromNodeToPage，Opera也支持它，因为它的引擎转移到了webkit。

- VoVaVc

---

window.webkitConvertPointFromNodeToPage已经被弃用。 - Rafael

Answer 2

alert('webkitRequestAnimationFrame' in window);

在Chrome 48 (正常)，Safari 9.0.2 (正常)，Opera 35 (正常)和Firefox 44.0.2 (异常)中进行了一致的测试。

- ling

Answer 3

为了知道它是否是通用的WebKit：

isWebkit = /(safari|chrome)/.test(navigator.userAgent.toLowerCase());

单词“safari”可能会在Chrome和Safari中都出现。

- Yaron Meiner

Answer 4

基础中的基础是这个：w3school JS。

代码：

<script>  
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";  
txt+= "<p>Browser Name: " + navigator.appName + "</p>";  
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";  
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";  
txt+= "<p>Platform: " + navigator.platform + "</p>";  
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";  
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";  
document.getElementById("example").innerHTML=txt;  
</script>

但这并不确定适用于-webkit-。

这里有一个相关的fiddle，我是指一个针对-webkit-浏览器警告的fiddle！（仅适用于Chrome、Safari；Opera 15+尚未支持！）jsfiddle.

以下是jQuery代码，请尝试：

$(document).ready(function(){

    /* Get browser */
    $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

    /* Detect Chrome */
    if($.browser.chrome){
        /* Do something for Chrome at this point */
        /* Finally, if it is Chrome then jQuery thinks it's 
           Safari so we have to tell it isn't */
        $.browser.safari = false;
    }

    /* Detect Safari */
    if($.browser.safari){
        /* Do something for Safari */
    }

});

这将在窗口加载时显示弹出窗口！

最好、简单且易于阅读的解决方案是：

$.browser.chrome = $.browser.webkit && !!window.chrome;  
$.browser.safari = $.browser.webkit && !window.chrome;  
if ($.browser.chrome) alert("You are using Chrome!");  
if ($.browser.safari) alert("You are using Safari!");

以下是我在一些网站上找到的基础知识:

1. w3schools.com
2. stackoverflow (我使用这个网站来查找代码示例.)

- Afzaal Ahmad Zeeshan

Answer 5

来自这篇文章：如何检测Chrome和Safari浏览器（Webkit）

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

if (isChrome) alert("You are using Chrome!");
if (isSafari) alert("You are using Safari!");

更一般的 WebKit：

var isWebkit = /webkit/.test( navigator.userAgent );

你应该使用类似于Modernizr的功能检测工具。

- Jeffpowrs