文档章节

检测浏览器版本并升级jQuery插件

筱飞
 筱飞
发布于 2016/12/01 14:03
字数 872
阅读 33
收藏 0
点赞 0
评论 0

前言

因为项目使用的是angular.js1.4,但从1.2开始angular对IE9以下的内核不再支持了。而国内还有需要用户使用的是360和firfox浏览器。我就在找一个提醒用户进行更新的方法。

这是一种解决方式,但是在angular环境中不能使用,自定义创建的弹出层无法append到body里。因为angular执行时,body还没有创建。然后代码报错。页面就停止加载。所以,如果要解决这个问题,就需要在body加载前处理。

我使用的方式是,检测浏览器版本,系统版本如果过旧的话。直接跳转到新页面,在新页面下载浏览器。

demo

<linkhref="~/jReject/css/jquery.reject.css"rel="stylesheet"/>
<scriptsrc="~/jReject/js/jquery.reject.js"></script>
<scriptsrc="jquery-1.9.1.min.js"></script>
<scripttype="text/javascript">
        $(function() {
            needDownloadNewExplorer();
        });
        function needDownloadNewExplorer() {
            setTimeout(function () {
                $.reject({
                    reject: {
                        safari: true, // Apple Safari
                        chrome: true, // Google Chrome
                        firefox: true, // Mozilla Firefox
                        msie: true, // Microsoft Internet Explorer
                        opera: true, // Opera
                        konqueror: true, // Konqueror (Linux)
                        unknown: true // Everything else
                    },
                    imagePath: './jReject/images/',
                    browserInfo: { // Settings for which browsers to display
                        chrome: {
                            // Text below the icon
                            text: 'Google Chrome',
                            // URL For icon/text link
                            url: 'http://rj.baidu.com/soft/detail/14744.html',
                            // (Optional) Use "allow" to customized when to show this option
                            // Example: to show chrome only for IE users
                            // allow: { all: false, msie: true }
                        },
                        firefox: {
                            text: 'Mozilla Firefox',
                            url: 'http://rj.baidu.com/soft/detail/11843.html'
                        },
                        safari: {
                            text: 'Safari',
                            url: 'http://www.apple.com/safari/download/'
                        },
                        opera: {
                            text: 'Opera',
                            url: 'http://www.opera.com/download/'
                        },
                        msie: {
                            text: 'Internet Explorer',
                            url: 'http://www.microsoft.com/windows/Internet-explorer/'
                        }
                    },
                    closeLink: '关闭此窗口',
                    header: '如果本网页显示有问题,请选择下载如下浏览器的最新版本', // Header Text
                    paragraph1: '', // Paragraph 1
                    paragraph2: '',
                    closeMessage: '' // Message below close window link
                }); // Customized Browsers
            }, 2000);
        }
</script>

执行的结果如下

注意修改图片存放路径

这个插件需要用到jQuery,jQuery的版本要2.0以下的。因为2.0以上的版本不再支持IE9以下。

这个插件的github地址为 https://github.com/TurnWheel/jReject

页面的demo地址为 http://jreject.turnwheel.com/

我使用的方式

window.location.href="http://baidu.com"//跳转新页面

下面这个是在360网站找到的check浏览器内核和操作系统版本的代码

http://se.360.cn/v5/laboratory6.htm //这个是360检测浏览器内核的网站。可以直接查看源代码如下:

<script>
		var bs = "<span>浏览器内核:</span><span class='big'>非IE内核</span>";
		user_agent = navigator.userAgent.toLowerCase();

		if (user_agent.indexOf("msie 10.0")>-1&&user_agent.indexOf("trident/6.0")>-1){
			bs = "<span>浏览器内核:</span><span class='big'>IE10</span>";
		}else if (user_agent.indexOf("msie 9.0")>-1&&user_agent.indexOf("trident/6.0")>-1){
			bs = "<span>浏览器内核:</span><span class='big'>IE10(兼容模式)</span>";
		}else if (user_agent.indexOf("msie 8.0")>-1&&user_agent.indexOf("trident/6.0")>-1){
			bs = "<span>浏览器内核:</span><span class='big'>IE10(兼容模式)</span>";
		}else if (user_agent.indexOf("msie 7.0")>-1&&user_agent.indexOf("trident/6.0")>-1){
			bs = "<span>浏览器内核:</span><span class='big'>IE10(兼容模式)</span>";
		}else if(user_agent.indexOf("msie 9.0")>-1) {
			bs = "<span>浏览器内核:</span><span class='big'>IE9</span>";
		}else if (user_agent.indexOf("msie 7.0")>-1&&user_agent.indexOf("trident/5.0")>-1){
			bs = "<span>浏览器内核:</span><span class='big'>IE9(兼容模式)</span>";
		}else if (user_agent.indexOf("msie 8.0")>-1&&user_agent.indexOf("trident/5.0")>-1){
			bs = "<span>浏览器内核:</span><span class='big'>IE9(兼容模式)</span>";
		}else if(user_agent.indexOf("msie 8.0")>-1) {
			bs = "<span>浏览器内核:</span><span class='big'>IE8</span>";
		}else if(user_agent.indexOf("msie 7.0")>-1&&user_agent.indexOf("trident/4.0")>-1){
			bs = "<span>浏览器内核:</span><span class='big'>IE8(兼容模式)</span>";
		}else if(user_agent.indexOf("msie 7.0")>-1){
			bs = "<span>浏览器内核:</span><span class='big'>IE7</span>";
		}else if(user_agent.indexOf("msie 6.0")>-1){
			bs = "<span>浏览器内核:</span><span class='big'>IE6</span>";
		}
		
		var os={
			'5.0':'Windows 2000',
			'5.2':'Windows 2003',
			'5.1':'Windows Xp',
			'6.0':'Windows Vista',
			'6.1':'Windows 7',
			'6.2':'Windows 8'
		};
		if(user_agent.match(/windows\s*nt\s*([0-9.]+)/))
		{
			if(os[RegExp.$1])
			{
			   os = os[RegExp.$1];
			}
		}else{
			os = window.navigator.platform;
		}
		document.getElementById('browser').innerHTML = bs+ "<br/><span>操作系统:</span><span class='big'>"+os+"</span>";
	</script>

 

© 著作权归作者所有

共有 人打赏支持
筱飞
粉丝 13
博文 108
码字总数 22146
作品 0
虹口
前端工程师
【BS学习】jQuery视频总结

【背景】 这两天看完了jQuery视频的视频,对学习到的东西做一个记录。 【内容】 一、JQuery框架简介 1、官方网站:www.jquery.com 2.创立者:John Resig 3.历史: 4.特点:(1)Write Less,...

yym15732626210 ⋅ 03/12 ⋅ 0

huangdf/seezoon-framework-all

项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理系统,方便快速开发;采用常用的技术栈,降低学习成本,项目完全前后端分离,后端定义统一的接口格式,统一参数校验,统一权...

huangdf ⋅ 04/20 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

强大的JQuery-自定义插件

====jQuery插件编写原则===== 1.命名 jQuery..js 2.插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素 3.this.each可以遍历所有元素...

chengfei_liu ⋅ 05/25 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素(转)

var chils= s.childNodes; //得到s的全部子节点var par=s.parentNode; //得到s的父节点var ns=s.nextSbiling; //获得s的下一个兄弟节点var ps=s.previousSbiling; //得到s的上一个兄弟节点v...

easonjim ⋅ 2017/01/04 ⋅ 0

JavaScript 加载框架 - Sleuth.js

Sleuth是一个加载框架,它允许开发者只需要require相应的库或者插件,不需要去下载,就可以直接使用,并且允许开发者任意切换版本。 使用 Sleuth.js 先后引用mapping-ch.min.js,sleuth.min....

jsing ⋅ 2014/11/23 ⋅ 0

3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈 ⋅ 04/14 ⋅ 0

jQuery-File-Upload 使用文档(翻译)

最近要用到多图上传,准备使用这个插件,但是没搜到相关的文档,只有官方的文档,主要是以有道翻译和个人理解为主 可能会有一些问题,但是比看原文是方便一些. 使用文档 插件的基本信息 插件demo ...

employeeee ⋅ 05/14 ⋅ 0

jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge ⋅ 05/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

IDEA创建SpringMVC+Mybatis+Maven项目

视频如下(加载有点慢请见谅,服务器不太好): 视频

影狼 ⋅ 28分钟前 ⋅ 0

前阿里P8架构师:精准定制Java架构师学习计划!

可以说,Java是现阶段中国互联网公司中,覆盖度最广的研发语言,掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。 有不少朋友问,除了掌握J...

java高级架构牛人 ⋅ 30分钟前 ⋅ 0

zookeper学习

https://blog.csdn.net/u012152619/article/category/6470028

~少司命~ ⋅ 32分钟前 ⋅ 0

Spring MVC ,JSON,JQuery,不懂JQuery,跳过了

/spring-mvc-study/src/main/webapp/course_json.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD ......

颖伙虫 ⋅ 32分钟前 ⋅ 0

2018上海云栖大会workshop-日志数据采集与分析对接

摘要: 日志数据采集与分析对接 课程描述 通过日志服务采集用户、数据库、业务等访问数据。演示对于业务日志分析与处理,程序日志查询与监控,打通日志与数据仓库对接案例。 日志种类 网站访...

阿里云云栖社区 ⋅ 33分钟前 ⋅ 0

mahout demo

package com.datamine.CollaborativeFiltering.mysql; import org.apache.mahout.cf.taste.impl.neighborhood.NearestNUserNeighborhood; import org.apache.mahout.cf.taste.impl.recommend......

xiaomin0322 ⋅ 34分钟前 ⋅ 0

red hat openstack 12配置要求

安装 openstack 之前,一般要规划整个系统中,到底要多少台机器来参与openstack, 根据rhosp12的官方文档: 最低要求是3台物理机,1台作为director,一台作为 controller ,一台作为computer....

tututu_jiang ⋅ 36分钟前 ⋅ 0

Rocket-Chip在GitHub上的各个源码

在github上通过搜索Rocket-chip可以得到36个结果:其中 https://github.com/freechipsproject/rocket-chip https://github.com/ucb-bar/riscv-boom https://github.com/ucb-bar/fpga-zynq (......

whoisliang ⋅ 41分钟前 ⋅ 0

【HAVENT原创】CentOS 6.5 下 Nginx 的安装与配置

nginx是轻量级的Web服务器、反向代理服务器及邮件服务器,具有占用内存少,并发能力强的优点,已被广泛应用。本文介绍目前最新版本 1.12.2 的安装。 各版本nginx下载地址:http://nginx.org/...

HAVENT ⋅ 47分钟前 ⋅ 0

查看linux系统重启之前的log -- last_kmsg

当 Linux Kernel 出现 BUG 的时候,后走入 panic flow,这个时候由于 Kernel 出现了严重的问题,adbd 也无法响应 adb 连接请求,这个时候想透过读取 Kernel Log Buffer 来看 Kernel Log 是不...

zyzzu ⋅ 48分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部