JS判断浏览器版本

 

CSS

        html,body{
            height: 100%;
        }
        body{
            margin: 0
        }
        div{
            padding-left: 50px;
        }
        .span{
            padding: 5px 15px;
            background: #177ad8;
            color: #fff;
            font-size: 14px;
            text-decoration: none;
            border-radius: 7px;
            cursor: pointer;
        }    

 

HTML

    <div>
        <p>点击下面的按钮，查看浏览器信息</p>
        <span class="span">点击查看</span>
        <p class="seebro"></p>
    </div>

 

JS

var ipspan =document.querySelector(".span");
    
    function inspect(){
        var userAgent=navigator.userAgent;

        // 火狐浏览器
        if(userAgent.indexOf("Firefox") >-1){
            return "Firefox";
        }
        // 谷歌浏览器
        if(userAgent.indexOf("Chrome") >-1){
            return "Chrome";
        }
        // IE
        if(userAgent.indexOf("IE") >-1){
            return "IE";
        }
    }

    ipspan.onclick=function(){
        document.querySelector(".seebro").innerHTML =inspect();
    }

 

navigator 里面保留的是关于客户机浏览器的信息，不是HTML DOM对象，而是一个JavaScript对象。获取浏览器的字符串，比如google浏览器，那么这个值就是以Chrome开头，Safari浏览器返回的userAgent信息里就包括字符串“Safari”