文档章节

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

筱飞
 筱飞
发布于 2016/12/01 14:03
字数 872
阅读 36
收藏 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>

 

本文转载自:http://transcoder.baidu.com/from=1014994c/bd_page_type=1/ssid=0/uid=0/pu=usm%400%2Csz%401320_2001%2C

共有 人打赏支持
筱飞
粉丝 14
博文 137
码字总数 22786
作品 0
虹口
前端工程师
jquery1.9不在支持的函数

jQuery1.9删除了一些在1.8中已经过时的api,想要把那些不够安全的、缺乏效率的、用处不大的,以及带有误导的特性统统去掉。如果你想升级你的jquery版本,但又使用了如下被删除的api的话,可以...

阿唐
2013/12/17
0
0
50个必备的实用jQuery代码段

本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快...

光石头
2011/10/21
0
0
50个必备的实用jQuery代码段.

如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}}); 2. 解决jQuery, prototype共存......

被风遗忘
2012/04/28
0
14
50个必备的实用jQuery代码段

本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2 才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快...

张慧华
2011/09/20
0
0
[笔记]jQuery UI的tabs组件在IE浏览器中的缓存问题~

jQuery中禁用缓存 最近在使用jQuery ui中的tabs插件时,遇到一个问题。 在非IE浏览器下,标签是自动刷新的。就是在不同的标签间切换,不用刷新整个页面,如果某个标签内容有更新,比如显示时...

leeoo
2011/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

精选Spring Boot三十五道必知必会知识点!

Spring Boot、Spring MVC 和 Spring 有什么区别? 1、Spring Spring最重要的特征是依赖注入。所有 SpringModules 不是依赖注入就是 IOC 控制反转。 当我们恰当的使用 DI 或者是 IOC 的时候,...

java知识分子
10分钟前
1
0
docker多容器部署lnmp环境

环境:RHEL7.5 ip:192.168.10.102,主机名:lb02 一、创建web、数据库目录 web网站目录为:/wwwroot,属主属组:www [root@lb02 ~]# mkdir /wwwroot[root@lb02 ~]# useradd -s /sbin/nolo...

人在艹木中
39分钟前
1
0
eclipse运行springboot项目报错‘找不到或无法加载主类’

这是一个很烦躁的问题~,往往困住大家好长时间,然后各种百度。借此,咱将这个问题有可能产生的原因进行一下总结。若有不完善之处欢迎大家在下面留言指出~~ Duang!问题出现 然后开始尝试解决...

Code辉
59分钟前
1
0
springboot oauth2 跨域设置

@Overridepublic void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/security/**") .authentica......

昆虫大侠
今天
1
0
08-利用思维导图梳理JavaSE-泛型

08-利用思维导图梳理JavaSE-泛型 主要内容 1.泛型的基本概念 1.1.定义 1.2.使用前提 1.3.使用泛型的好处 2.泛型的使用 2.1.泛型类定义 2.2.泛型对象定义 2.3.泛型中的构造方法 2.4.泛型方法的...

飞鱼说编程
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部