修改iealert.js支持jQuery1.9+

  iealert.js使用了jQuery的live方法及$.browser属性,而jQuery1.9+已经不支持这2个方法及属性,所以要兼容高版本jQuery,需要对iealert.js代码进行修改。

注意:jQuery2+不再支持IE8-浏览器,不要导入2+以上的jQuery,jQuery会直接报错,不是iealert.js的问题。

  修改iealert.js支持jQuery1.9+源代码及样式如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IEalert修改版:IE浏览器版本过低提示的Jquery插件</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script>
    /*iealert.js修改版源代码
 * IE Alert! jQuery plugin
 * version 1
 * author: David Nemes http://nmsdvid.com
 * http://nmsdvid.com/iealert/
 */
    (function ($) {
        //jQuery1.9+已经不在支持live方法,事件改为初始化成功后在调用bind方法绑定click事件,这样无论导入什么版本的jQuery都可以兼容
        /*$("#goon").live("click", function () {
            $("#ie-alert-overlay").hide();
            $("#ie-alert-panel").hide();
        });;*/
        var isIE = window.ActiveXObject || 'ActiveXObject' in window;//判断是否IE浏览器
        if (isIE) {
            //jQuery1.9+已经不在支持$.browser属性,可以使用IE特有条件注释来判断IE浏览器
            //使用IE条件注释判断是否IE8-浏览器
            document.write('<!--[if lt ie 9]><script>window.isIE8=true;window.showIEAlert=true<\/script><![endif]-->');//IE8及以下
            document.write('<!--[if lt ie 8]><script>window.isIE7=true<\/script><![endif]-->');//IE7及以下
            document.write('<!--[if lt ie 7]><script>window.isIE6=true<\/script><![endif]-->');//IE6及以下
        }
        function initialize($obj, support, title, text) {
            var panel = "<span>" + title + "</span>"
                      + "<p> " + text + "</p>"
                      + "<div class='browser'>"
                      + "<ul>"
                      + "<li><a class='chrome' href='https://www.google.com/chrome/' target='_blank'></a></li>"
                      + "<li><a class='firefox' href='http://www.mozilla.org/en-US/firefox/new/' target='_blank'></a></li>"
                      + "<li><a class='ie9' href='http://windows.microsoft.com/en-US/internet-explorer/downloads/ie/' target='_blank'></a></li>"
                      + "<li><a class='safari' href='http://www.apple.com/safari/download/' target='_blank'></a></li>"
                      + "<li><a class='opera' href='http://www.opera.com/download/' target='_blank'></a></li>"
                      + "<ul>"
                      + "</div>";
            var overlay = $("<div id='ie-alert-overlay'></div>");
            var iepanel = $("<div id='ie-alert-panel'>" + panel + "</div>");
            var docHeight = $(document).height();
            overlay.css("height", docHeight + "px");
            if (support === "ie8") {// shows the alert msg in IE8, IE7, IE6
                //if ($.browser.msie && parseInt($.browser.version, 10) < 9) {//已经加了IE8及以下判断才会进入此函数,可以去掉这个判断
                $obj.prepend(iepanel);
                $obj.prepend(overlay);
                //}
                //if ($.browser.msie && parseInt($.browser.version, 10) === 6) {
                if (window.isIE6) {//IE6判断,添加特殊样式进行就行修正
                    $("#ie-alert-panel").css("background-position", "-626px -116px");
                    $obj.css("margin", "0");
                }
            } else if (support === "ie7") { 	// shows the alert msg in IE7, IE6
                //if ($.browser.msie && parseInt($.browser.version, 10) < 8) {
                if (window.isIE7) {
                    $obj.prepend(iepanel);
                    $obj.prepend(overlay);
                }
                //if ($.browser.msie && parseInt($.browser.version, 10) === 6) {
                if (window.isIE6) {//IE6判断,添加特殊样式进行就行修正
                    $("#ie-alert-panel").css("background-position", "-626px -116px");
                    $obj.css("margin", "0");
                }
            } else if (support === "ie6" && window.isIE6) { 	// shows the alert msg only in IE6
                //if ($.browser.msie && parseInt($.browser.version, 10) < 7) {//这个判断和if合并
                $obj.prepend(iepanel);
                $obj.prepend(overlay);
                $("#ie-alert-panel").css("background-position", "-626px -116px");
                $obj.css("margin", "0");
                // }
            }
        }; //end initialize function
        $.fn.iealert = function (options) {
            var defaults = {
                support: "ie7",  //IE版本支持,可以为ie8(ie8-都会显示提示),ie7(ie7-都会显示提示),ie6(ie6-都会显示提示)
                title: "\u4F60\u77E5\u9053\u4F60\u7684Internet Explorer\u662F\u8FC7\u65F6\u4E86\u5417?", // title text
                text: "\u4E3A\u4E86\u5F97\u5230\u6211\u4EEC\u7F51\u7AD9\u6700\u597D\u7684\u4F53\u9A8C\u6548\u679C,\u6211\u4EEC\u5EFA\u8BAE\u60A8\u5347\u7EA7\u5230\u6700\u65B0\u7248\u672C\u7684Internet Explorer\u6216\u9009\u62E9\u53E6\u4E00\u4E2Aweb\u6D4F\u89C8\u5668.\u4E00\u4E2A\u5217\u8868\u6700\u6D41\u884C\u7684web\u6D4F\u89C8\u5668\u5728\u4E0B\u9762\u53EF\u4EE5\u627E\u5230.<br /><br /><h1 id='goon' style='font-size:20px;cursor:pointer;'>>>>\u7EE7\u7EED\u8BBF\u95EE</h1>"
            };
            var option = $.extend(defaults, options);
            return this.each(function () {
                if (window.showIEAlert) {//条件注释判断IE8及以下才执行初始化判断
                    //if ( $.browser.msie ) {
                    var $this = $(this);
                    initialize($this, option.support, option.title, option.text);
                    $("#goon").bind("click", function () {
                        $("#ie-alert-overlay").hide();
                        $("#ie-alert-panel").hide();
                    });
                } //if ie	
            });
        };
    })(jQuery);
</script>
<style>
    /*
	CSS Stylesheet for IE Alert! plugin. 
     * ==================IE Alert样式==================
*/
/*
	Overlay Background
*/
#ie-alert-overlay {
width:100%;
height:100%;
background-image:url(/imgblog/20160624/1813257320.png);
position: fixed; 
top: 0; 
left: 0;
z-index:9999;
}
* html #ie-alert-overlay {   /* fixed position hack for IE6 */
	position: absolute;
	z-index:9999;
	
}
/*
	Pop Up Panel
*/
#ie-alert-panel {
	width:520px;
	height:331px;
	position:fixed;
	background: url(/imgblog/20160624/1813362322.png) no-repeat;
	background-position: -1px -109px ;
	top:50%;
	left:50%;
	margin:-201px 0 0 -296px;
	padding:72px 0 0 72px;
	_position:absolute;  /* fixed position hack for IE6 */
    _top:expression(300+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');  /* top:300px hack for IE6 */
    
    /* font settings */
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight:bold;
	color:#333;
	line-height:1.5em;
	z-index:10000;
}
#ie-alert-panel p {
	font-size:14px;
	width:486px;
	text-align:justify;
}
#ie-alert-panel img {
	border:0;
}
#ie-alert-panel span {
	font-size:18px;
	margin: 0 0 20px 0;
	display:block;
	padding:0;
}
#ie-alert-panel ul {
	list-style: none;
	margin:0;
	padding:0;	
}
#ie-alert-panel li {
	float:left;
	margin:0 22px 0 0;
		
}
#ie-alert-panel li.last {
	margin-right:0;
}
#ie-alert-panel a {
	display:inline-block;
		
}
.browser {
	position: absolute;
	bottom:35px;	
}
.chrome, .firefox, .ie9, .opera, .safari {
	background: url(/imgblog/20160624/1813362322.png) no-repeat;
}
/*
	browsers
*/
.chrome {
	background-position: 0 0;
	width: 73px;
	height: 96px;
	margin:0 4px 0 0;
}
.firefox {
	background-position: -292px 0;
	width: 73px;
	height: 98px;
}
.ie9 {
	background-position: -179px 0;
	width: 95px;
	height: 98px;
}
.opera {
	background-position: -90px 0;
	width: 73px;
	height: 98px;
}
.safari {
	background-position: -387px 0;
	width: 73px;
	height: 98px;
	margin:0 4px 0 0;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$("body").iealert();
	});
</script>
</head>
<body>
<div style="margin:200px auto; width:500px;  border:1px #eee dashed; padding:20px;">
	<h1>默认是低于IE8浏览器都会弹出提示框,大家想看到效果就用IE6、IE7来打开运行。已经做过修改,兼容jQuery1.9+以上的jQuery。需要注意的是jQuery2+不在支持IE8-浏览器,不要导入2+以上的jQuery,jQuery会支持报错,不是iealert.js的问题了。</h1>
</div>
</body>
</html>

iealert.js样式图片素材如下


修改iealert.js支持jQuery1.9+


 

修改iealert.js支持jQuery1.9+


原创文章,转载请注明出处:修改iealert.js支持jQuery1.9+
评论(0)Web开发网
阅读(243)喜欢(0)不喜欢(0)JavaScript/Ajax