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

im, 无色
im, 无色
im, 无色
919
文章
0
评论
2019年8月4日20:18:43 评论 3,038

一般想做一些酷炫的网站都有个烦恼,那就是兼容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" rel="external nofollow" target="_blank" href="https://www.liulanqi.com/wp-content/themes/begin/go.php?url=aHR0cDovL2Jyb3dzZWhhcHB5Lm9zZmlwaW4uY29tLw==" 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));

最终效果如下:
提示用户升级浏览器代码 低于IE9的浏览器提示

im, 无色
  • 本文由 发表于 2019年8月4日20:18:43
短网址运作流程及盈利模 网页开发

短网址运作流程及盈利模

相信大家手机收到的一些短信中,经常还包含一些短网址,如果你点击访问的话,会发现,跳转到的网页的URL却是非常长的。这是因为短信商家采用了短网址服务,替代原先冗长的网址,方便传输和分享。 短网址运作流程...
在 Apache 中启用 HTTP/2 网页开发

在 Apache 中启用 HTTP/2

这个页面给出了一些如何构建/部署/配置的建议。目的是为了大家发现 bugs 时能升级它,或者给一些能更好工作的建议。 最后,这会归并回到官方 Apache 文档,这里只会留下一个到那里的链接。暂时我们...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: