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