提示用户升级浏览器代码 低于ie9的浏览器提示

Posted 2020-08-19 osfipin note

一般想做一些酷炫的网站都有个烦恼，那就是兼容ie浏览器，好在现在使用ie的也越来越少，微软也转战edge浏览器。

使用 Bootstrap经常用js插件可以模拟兼容旧版本的浏览器(bsie 鄙视IE)，而且经常可以看到如下的代码：

    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

不过，个人还是倾向于提示用户升级浏览器，而不是为了兼容老版浏览器，而煞费苦心的调试，累。。。

一般喜欢用上面的代码，嵌入一个div提示用户升级浏览器，说实话也不喜欢，这方式还得挨个改模板。下面提供一种直接一段JS 放在页面或js文件里就可以实现提示：

(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){var d=document.createElement("div");d.className="browsehappy";d.innerHTML=\'<div style="width:100%;height:100px;font-size:20px;line-height:100px;text-align:center;background-color:#E90D24;color:#fff;margin-bottom:40px;">\\u4f60\\u7684\\u6d4f\\u89c8\\u5668\\u5b9e\\u5728<strong>\\u592a\\u592a\\u65e7\\u4e86</strong>\\uff0c\\u592a\\u592a\\u65e7\\u4e86 <a target="_blank" href="http://browsehappy.osfipin.com/" style="background-color:#31b0d5;border-color: #269abc;text-decoration: none;padding: 6px 12px;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#FFEB3B;">\\u7acb\\u5373\\u5347\\u7ea7</a></div>\';var f=function(){var s=document.getElementsByTagName("body")[0];if("undefined"==typeof(s)){setTimeout(f,10)}else{s.insertBefore(d,s.firstChild)}};f()}}(window));

最终效果如下：

 

此段代码针对于ie6 ie7 ie8 ie9都有提示。这种是比较简单的提示方式，样式相对比较丑。

 

===划重点===

可以到下面的网站里查看更多的提示样式，根据自己的情况定义：

 了解更多：快乐浏览:浏览器升级提示。