javascript - 如何根据浏览器提供不同的内容

Question

我最近偶然发现了这个网站:LocalMapsAccess ，当我用 Chrome 打开网站时，在页脚中我可以看到这张图片:

而在Firefox中，同样的网站显示不同的内容:

我想实现这个，但我不知道我应该做什么或如何开始。有人可以帮我吗？提前致谢。

Answer 1

看到网站的代码后，他们似乎使用了某种浏览器嗅探方法。这可以通过获取客户端的用户代理字符串来完成。这是一个糟糕的方法，但大多数情况下是有效的，因为用户代理可以轻松伪造。

好的，解决方案是:

1. 服务器端 使用 PHP。
   您需要使用 $_SERVER['HTTP_USER_AGENT']。

2. 客户端 使用 JavaScript。
   您需要使用 navigator.userAgent。

使用 PHP 的解决方案

如果您看到 get_browser() PHP 文档中的手册，有 ruudrp at live dot nl 的评论五年前。

如果将此代码放入 PHP 中:

<?php
    header("Content-type: text/plain");
    function getBrowser() 
    { 
        $u_agent = $_SERVER['HTTP_USER_AGENT']; 
        $bname = 'Unknown';
        $platform = 'Unknown';
        $version= "";

        //First get the platform?
        if (preg_match('/linux/i', $u_agent)) {
            $platform = 'linux';
        }
        elseif (preg_match('/macintosh|mac os x/i', $u_agent)) {
            $platform = 'mac';
        }
        elseif (preg_match('/windows|win32/i', $u_agent)) {
            $platform = 'windows';
        }

        // Next get the name of the useragent yes seperately and for good reason
        if(preg_match('/MSIE/i',$u_agent) && !preg_match('/Opera/i',$u_agent)) 
        { 
            $bname = 'Internet Explorer'; 
            $ub = "MSIE"; 
        } 
        elseif(preg_match('/Firefox/i',$u_agent)) 
        { 
            $bname = 'Mozilla Firefox'; 
            $ub = "Firefox"; 
        } 
        elseif(preg_match('/Chrome/i',$u_agent)) 
        { 
            $bname = 'Google Chrome'; 
            $ub = "Chrome"; 
        } 
        elseif(preg_match('/Safari/i',$u_agent)) 
        { 
            $bname = 'Apple Safari'; 
            $ub = "Safari"; 
        } 
        elseif(preg_match('/Opera/i',$u_agent)) 
        { 
            $bname = 'Opera'; 
            $ub = "Opera"; 
        } 
        elseif(preg_match('/Netscape/i',$u_agent)) 
        { 
            $bname = 'Netscape'; 
            $ub = "Netscape"; 
        } 

        // finally get the correct version number
        $known = array('Version', $ub, 'other');
        $pattern = '#(?<browser>' . join('|', $known) .
        ')[/ ]+(?<version>[0-9.|a-zA-Z.]*)#';
        if (!preg_match_all($pattern, $u_agent, $matches)) {
            // we have no matching number just continue
        }

        // see how many we have
        $i = count($matches['browser']);
        if ($i != 1) {
            //we will have two since we are not using 'other' argument yet
            //see if version is before or after the name
            if (strripos($u_agent,"Version") < strripos($u_agent,$ub)){
                $version= $matches['version'][0];
            }
            else {
                $version= $matches['version'][1];
            }
        }
        else {
            $version= $matches['version'][0];
        }

        // check if we have a number
        if ($version==null || $version=="") {$version="?";}

        return array(
            'userAgent' => $u_agent,
            'name'      => $bname,
            'version'   => $version,
            'platform'  => $platform,
            'pattern'    => $pattern
        );
    } 

    // now try it
    $ua = getBrowser();
    $yourbrowser = "Your browser: " . $ua['name'] . " " . $ua['version'] . " on " .$ua['platform'] . " reports:\n" . $ua['userAgent'];
    print_r($yourbrowser);
?>

我只是想在这里添加代码。请注意，但这应该是答案。

---

更新:PHP 代码输出。

你会得到以下内容:

1. Chrome 浏览器

   Your browser: Google Chrome 47.0.2526.111 on windows reports:
   Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36
   

2. 火狐浏览器

   Your browser: Mozilla Firefox 42.0 on windows reports:
   Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0
   

3. Internet Explorer

   Your browser: Unknown ? on windows reports:
   Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; managedpc; rv:11.0) like Gecko
   

好的，上面的代码在 Windows 7 上的 Internet Explorer 11 中不起作用。不管怎样，现在谁还在乎 IE。

---

最终更新

现在基于上面的代码，你可以检查这种方式来从你的服务器端跨不同的浏览器传递不同的内容。

<?php
    // The same function to be called.
    $ua = getBrowser();
    // Let's check for our required values.
    if ($ua['name'] == "Mozilla Firefox")
        // Add Firefox's content.
        echo "firefox.png";
    elseif ($ua['name'] == "Google Chrome")
        // Add Chrome's content.
        echo "chrome.png";
    else
        // Finally add our devastated IE's content.
        echo "ie.png";
?>

希望这对您有所帮助。