Go to comments

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&param2=value2&param3=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



Leave a comment 0 Comments.

Leave a Reply

换一张