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
二、获取url地址的信息
以前以为只有 PHP 后面能传参数,思想固化了,
后来知道 html 页面后面也能传参数,js 可以获取到 url 后面的参数
第一个参数前面需要用 ? 问号,
问号表示是参数开始之外,其它参数用 & 相连
<a href="a.html?param1=value1¶m2=value2¶m3=value3">超链接</a>
js 获取 url 上面的参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js获取参数/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());
}
</script>
</body>
</html>转自:
https://zhidao.baidu.com/question/373933487.html
