@heisea/browser-check

v0.1.4

Published

2 years ago

浏览器的检查，并提示用户

Downloads

0High
0Medium
0Low

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 | 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) | 快速修改提示

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme