（day05-02）查看浏览器名称、版本号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    var ua=navigator.userAgent;
    document.write(`<h1>${ua}</h1>`)
    //win10->edge浏览器->f12->仿真->用户代理字符串->切换不同浏览器，观察userAgent字符串的内容：
    //1、自己浏览器的名称、版本号包含位置？位置不确定
    //2、是否包含其他浏览器的名称？有哪些？解决兼容性问题
        //希望获得隐藏浏览器相同的待遇 

    //注意顺序
    //IE   ...MSIE8.0...
    //Firefox   ...Firefox/55.0...
    //Chrome   ...Gecko) Chrome/60.0.3112.113 Safari/537.36...
    //OPR   ...Chrome/60.0.3112.90 Safari/537.36 OPR/47.0.2631.80...
    //Safari   ...Safari/602.1
    //Edge   ...Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299...

    //1、拿到浏览器名称 browser
    var browser,version;
    //若ua中包含IE，且不等于-1，说明一点是IE，且版本号为11
    if(ua.indexOf("IE")!=-1){
        browser="IE";
    }
    //否则 若ua中包含IE，且不等于-1，说明一点是IE
    else if(ua.indexOf("Trident")!=-1){
        browser="IE";version=11;
    }
    //否则 ua中包含Firefox，且不等于-1，说明一点是Firefox"
    else if(ua.indexOf("Firefox")!=-1){
        browser="Firefox";
    }
    //否则 ua中包含OPR，且不等于-1，说明一点是OPR
    else if(ua.indexOf("OPR")!=-1){
        browser="OPR";
    }
    //否则 ua中包含Chrome，且不等于-1，说明一点是Chrome
    else if(ua.indexOf("Chrome")!=-1){
        browser="Chrome";
    }
    //否则 ua中包含Safari，且不等于-1，说明一点是Safari
    else if(ua.indexOf("Safari")!=-1){
        browser="Safari";
    }
    document.write(`<h1>${browser}</h1>`)


    //2、若还未确定版本号
    if(version===undefined){
        //进一步判断浏览器版本号
        //先找到浏览器名称在ua中的位置
        var i=ua.indexOf(browser)
        //跳到版本号开始的位置：浏览器第一个字母的位置+浏览器名称的长度+1
        i+=browser.length+1;
        //截取ua中i位置后三位转为整数
        version=parseInt(ua.slice(i,i+3));
    }
    document.write(`<h1>${version}</h1>`)

</script>
</body>
</html>
在这里插入图片描述
（day05-02）查看浏览器名称、版本号

猜你喜欢
