wy-browser-check
浏览器检查，当版本低于指定版本时提示。默认引入之后自动检查，可以获得window.BrowserObj 来添加更多操作,默认只检查ie 10 以上，更多操作可以查看demo.
能检测出的版本的浏览器
- chrome //谷歌
- ie //IE
- safari //mac safari
- firefox // 火狐
能检测对应的浏览器，返回true or false
- edge // Edge
- opera// opera内核
- webKit // 苹果、谷歌内核
- mobile // 是否为移动终端
- ios // ios终端
- android // android终端或者uc浏览器
- iPhone // 是否为iPhone或者QQHD浏览器
- iPad // 是否iPad
- webApp // 是否web应该程序，没有头部与底部
- weixin // 是否微信
- qq // 是否QQ
目录说明
build 生产版 min 为压缩版
- src 源码
- /demo // 演示demo
- common.js // 插件源码
命令
进行开发，查看demo:http://localhost:3000/demo
npm start打包出生产版本，min为压缩版本
npm run build
npm version
npm publish
安装
npm包引入
npm i @weiyi/browser-check使用
es6 引入方式 注意webpack的模块方案不支持ie8
import BrowserCheck from 'browser-check'webpack 引入
依赖 copy-webpack-plugin
npm i copy-webpack-plugin -D
安装配置
const CopyWebpackPlugin = require('copy-webpack-plugin');
// 拷贝文件
new CopyWebpackPlugin([
{
// 获取
from: path.resolve(__dirname, '../node_modules/browser-check/build/wy-browser-check.min.js'),
// 导出
to:'js/wy-browser-check.js'
}
])页面配置
<script src="js/wy-browser-check.js"></script>配置 BrowserObj
添加更多验证
// 配置其他的
BrowserObj.targets = {
chrome : 70
}
// 主动验证
BrowserObj.validateVersion('chrome');
// 自定义一个提示内容
BrowserObj.setTip('您的浏览器$1,版本过低！')页面中直接body配置初始化,配置为BrowserCheck
<body data-targets = '{chrome : 70,ie:10}' data-tip ='$1修改提示' data-callback='function a(){console.log("自定义回调")}' >new BrowserCheck({})
此为该插件的核心方法，关闭自动初始化，可以在
<body data-browser='false' >然后重新初始化 new BrowserCheck({})
{
// 目标浏览器版本 默认ie 10 以上，允许设置多种版本
targets:{
'ie':10,
},
// 低版本提示支持Html，$1会替换成当前浏览器类型
tip:'',
// tip ,check 当前实例
errorFn(tip,check){
},
// 自定义回调，obj当前实例,
callback(check){
// 检查是否为微信浏览器 ,当存在自定义方法时不会执行提示
check.validateVersion('weixin','',()=>{
widow.localhost.href = ''
})
}
} 属性
实例后提供的属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| targets | Object | 配置的浏览器版本控制 |
| browser | Object | 当前浏览器的所有信息 包括是否移动端，微信，qq ，安卓等 |
| userAgent | Object | 当前浏览器代理头信息 |
| tip | Sting | 提示时显示内容 |
| now | String | 当前浏览器 目前只支持 火狐，谷歌，safari,ie |
browser
this.browser 信息说明，option.targets 参考以下名称
| 名称 | 说明 |
|---|---|
| ie | ie浏览器 |
| edge | edge浏览器 内容有别与其他ie 只判断 true or false |
| firefox | 火狐浏览器 |
| chrome | 谷歌浏览器 |
| safari | safari 浏览器 |
| mobile | 移动端浏览器 只判断 true or false |
| ios | ios 设备 只判断 true or false |
| android | android设备 只判断 true or false |
| iPhone | iPhone或者QQHD浏览器 只判断 true or false |
| iPad | iPad 只判断 true or false |
| webApp | web应该程序 只判断 true or false |
| weixin | 微信浏览器 只判断 true or false |
| qq浏览器 只判断 true or false | |
| opera | 欧朋浏览器 只判断 true or false |
| webKit | webkit 内核浏览器 只判断 true or false |
方法
实例后提供的方法
| 名称 | 参数 | 说明 |
|---|---|---|
| tipShow | contentString) | 生产并显示提示，content为提示的内容 支持Html |
| validateVersion | name(Sting) tip（String）fn(Function) | 检查当前浏览器器信息，name 为this.browser对应的健名，tip 为提示信息，默认为 this.tip ,fn为不通过回调 默认为 this.tipShow |
| setTip | html(String) | 快速修改提示 |