前端页面兼容性问题学习

2021-11-08 07:20:41

2018.6.16 端午节开始笔记

说道前端页面兼容问题，首先应该了解，通过同一网站怎么判断打开用户是手机端还是pc端，这是前端页面兼容问题前提。
写到这里我想有人这样说，根据屏幕大小判断是否是手机还是电脑，这个我不否认可以，但是现在我说的是另一种方法。

Navigator对象

首先来了解一下Navigator 对象，Navigator 对象包含有关浏览器的信息，下面的userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。所以我们可以通过判断navigator.useragent里面是否有某些值来判断，比如我的电脑是mac，所以打印出来的值为

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

具体含义不解释，有兴趣同学自行百度，可以看到里面含有 Mac 字样，其他的也是类似的。

　那如何判断页面是在移动端还是PC端打开的呢？
　网上有很多方法，写的或难或简单，实际上一行代码就够了
　

<script type="text/javascript">

function is_mobile() {

    var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;

    var u = navigator.userAgent;

    if (null == u) {
        return true;
    }
    var result = regex_match.exec(u);
    if (null == result) {
        return false
    } else {
        return true
    }

}
if (is_mobile()) {
document.location.href = 'http://m.ftcycc.com/';
}

</script>

window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" :  "http://news.baidu.com/";

以上代码利用了正则表达式和三目运算符，含义就是如果是移动端打开的话那就跳转到 “https:www.baidu.com/” ，如果不是就跳转到”http://new.baidu.com/“，这个看不懂的话，那我下面这样写就很容易理解了吧

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "https://www.baidu.com/";
} else {
    window.location.href = "http://news.baidu.com/";
}

　什么？if里面的判断还是看不懂？实际上就是利用正则去判断 navigator.useragent 是否含有 Android/webOs/iphone 等字符串，并且利用修饰符 “i” 做了不区分大小写，然后用正则的方法 test 去判断是否满足，如果这种方式不理解的话完全可以利用字符串的 indexOf 方法去判断。
　OK，就说这么多咯！祝工作顺利！

BrowserDetect.js

浏览器检测是在工作中经常用到的，如果只是简单判断当前是什么浏览器的话可以通过window.navigator.useragent这样的js来直接判断就可以了！
但是针对浏览器版本要求比较高的时候，如果只是单纯的判断浏览器的名字的话还不能解决问题，这时候就要通过其他方式来实现！现有的jquery已经废弃了$.browser的使用，所以在这里我介绍一个叫做”浏览器嗅探器”的程序来实现！
代码如下：（BrowserDetect.js）

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Internet Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

使用方式如下：

BrowserDetect.browser;// 浏览器的名称，例如Firefox，IE
BrowserDetect.version;//浏览器的版本，比如，7、11
BrowserDetect.OS;//浏览器所宿主的操作系统，比如Windows、Linux

这个js兼容非常不错！使用起来比较简单，而且功能强大！

browserSniffer

现在的浏览器可真是越来越多，但兼容性可真是不敢恭维，这个脚本可根据浏览器来自动进行导航，在特定场合是非常有用的，你好好看看吧！！！

<SCRIPT language="JavaScript">  

function browserSniffer(netscape4URL,explorer4URL,webtvURL,aolURL,operaURL,version3URL,w3cURL) {  
var agt=navigator.userAgent.toLowerCase();  
var agt=navigator.userAgent.toLowerCase();  
var is_major = parseInt(navigator.appVersion);  
var is_minor = parseFloat(navigator.appVersion);  
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)  
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)  
&& (agt.indexOf('webtv')==-1));  
var is_nav2 = (is_nav && (is_major == 2));  
var is_nav3 = (is_nav && (is_major == 3));  
var is_nav4 = (is_nav && (is_major == 4));  
var is_nav4up = (is_nav && (is_major >= 4));  
var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) || (agt.indexOf("; nav") != -1)) );  
var is_nav5 = (is_nav && (is_major == 5));  
var is_nav5up = (is_nav && (is_major >= 5));  
var is_ie = (agt.indexOf("msie") != -1);  
var is_ie3 = (is_ie && (is_major < 4));  
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")==-1) );  
var is_ie4up = (is_ie && (is_major >= 4));  
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );  
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);  
var is_aol = (agt.indexOf("aol") != -1);  
var is_aol3 = (is_aol && is_ie3);  
var is_aol4 = (is_aol && is_ie4);  
var is_opera = (agt.indexOf("opera") != -1);  
var is_webtv = (agt.indexOf("webtv") != -1);  

if (is_nav4up) {  
   location.href = netscape4URL; // netscape 4+ but not NS5  
}else if (is_ie4up) { //IE4 & IE5 but returns IE4  
   location.href = explorer4URL;  
}else if (is_webtv) { // Web TV  
   location.href = webtvURL;  
}else if (is_aol || is_aol3 || is_aol4) { //AOL  
   location.href = aolURL;  
}else if (is_opera) { // Opera  
   location.href = operaURL;  
}else if (is_ie3||is_nav3) { // 3.0 version browsers  
   location.href = version3URL;  
}else if (is_nav5up) { // Netscape 5  
   location.href = w3cURL;  
}  
}  

</SCRIPT>  
<BODY onLoad="browserSniffer('nn4.html','IE4.html','webtv.html', 'aol.html','opera.html','NNandIE3.html','nn6.html')">

码农公寓

2018.6.16 端午节开始笔记

Navigator对象

BrowserDetect.js

browserSniffer

相关文章