JS完美收官 BOM知识解决两个小应用

一、判断PC端还是移动端

先要知道navigator对象，

navigator对象包含有关浏览器的信息，下面的userAgent(A要大写)属性是一个只读的字符串，声明了浏览器用于HTTP请求的用户代理头的值

所以我们可以通过判断 navigator.userAgent 里面是否有某些值来判断

document.write(navigator.userAgent);
    
/*
chrome浏览器
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36
    
opera浏览器
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 OPR/56.0.3051.52
    
IE
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
    
360
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
*/

如何判断页面是在移动端还是PC端打开的呢？

window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://m.ruyic.com/" :  "

分解

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {

    //window.location.href = "https://m.ruyic.com/";
    alert("移动端");

} else {

    //window.location.href = "http://ruyic.com/";
    alert("PC端");

}

代码解释

if里面是正则表达式，实际上就是利用正则去判断 navigator.userAgent 是否含有 Android/webOs/iphone 等字符串，并且利用修饰符 "i" 做了不区分大小写，然后用正则的方法 test 去判断是否满足，

如果这种方式不理解的话完全可以利用字符串的 indexOf 方法去判断。

以上内容来自：https://www.cnblogs.com/gaohuijiao/p/6736155.html 感谢作者，他写的很清楚也容易懂。

indexOf方法做的，忘了上从哪里转的了

var mobile_bs = {
    versions: function() {
        var u = navigator.userAgent;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1,  //opera内核
            webKit: u.indexOf('AppleWebKit') > -1,  //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,  //火狐内核
            mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,  //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),  //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,  //android终端或者uc浏览器
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,   //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1,     //是否iPad
            webApp: u.indexOf('Safari') == -1   //是否web应该程序，没有头部与底部
        }
    } ()
};
if (mobile_bs.versions.mobile) {
    if (mobile_bs.versions.android || mobile_bs.versions.iPhone || mobile_bs.versions.iPad || mobile_bs.versions.ios) {
        window.location.href = "http://ruyic.com/m/";
    }
};
    
// https://www.cnblogs.com/andyhxl/p/6554402.html
// https://help.yjcom.com/archives/10572.html

二、html超链接怎么传参数（获取url地址的信息）

<a href="a.html?param=value&param1=value1&param2=value2">超链接</a>

如上代码a.html是需要连接的地址，后面紧接着"?"第一个参数名称"param"=参数值"value"&第二个参数名称"param1"=第二个参数值"value1"依次类推，

有多少个参数写上多少个参数及参数值，

需要注意的是第一个参数前面需要用"?"表示是参数开始之外，其它参数用"&"相连

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html页面怎么网址传参</title>
</head>
<body>

<script>
/**
 * 获取参数的键值对对象。
 * @returns {Object}
 */
var getParam = function () {
    try{
        var url = window.location.href;
        var result = url.split("?")[1];
        var keyValue = result.split("&");
        var obj = {};
 
        for (var i = 0; i < keyValue.length; i++) {
            var item = keyValue[i].split("=");
            obj[item[0]] = item[1];
        }
        return obj;

    }catch(e){
        console.warn("There has no param value!");
    }
};


// 页面加载完毕，打印键值对对象
window.onload = function () {
    console.log(getParam());
}


// 转自：https://zhidao.baidu.com/question/373933487.html
</script>

</body>
</html>