檢測瀏覽器版本並升級jQuery插件

前言

由於項目使用的是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>