html提示更新浏览器的代码,IE9及以下浏览器升级提示

痛定思痛。 2022-10-06 12:49 247阅读 0赞

在使用react的项目中一般都有兼容性问题，特别是使用了组件库比如element-react或者ant-design等等，在ie下多少都会有点小问题，比如样式不正确，或者组件功能失效，甚至白屏等问题。

IE白屏问题

一般情况下，白屏的问题在index.html中引入这两个js就能解决

解决 create-react-app IE 兼容性问题

es6-shim

IE低版本浏览器升级提示

但是在更低版本的IE浏览器中还是会白屏。这个时候最好友好的提示用户升级浏览器即刻。

在index.html加入以下代码，在ie9及以下会出现浏览器升级提示.

//浏览器版本过低 提示升级 低于ie 10的都会提示

(function (w) \{

if (!("WebSocket" in w && 2 === w.WebSocket.CLOSING)) \{

var d = document.createElement("div");

d.className = "browsehappy";

d.innerHTML = '

为了改善你的体验，请升级你的浏览器 [点击此处升级][Link 1]

';

var f = function () \{

var s = document.getElementsByTagName("body")\[0\];

if ("undefined" == typeof(s)) \{

setTimeout(f, 10)

\} else \{

s.insertBefore(d, s.firstChild)

\}

\};

f()

\}

\}(window));

ie10及以上

ie10及以上正常显示页面，没有升级提示.

ie9

ie9提示如下: 有浏览器升级提示，且页面能够正常展示

![bVbB7lM][]

ie8及以下

ie8及以下提示如下：有浏览器升级提示，页面js有报错，导致页面白屏了。

![bVbB7mD][]

暂时先简单的进行ie低版本处理

html头部建议

建议在html 的 head加入以下代码，360浏览器会默认使用极速模式(webkit)

[Link 1]: http://browsehappy.osfipin.com/
[bVbB7lM]: https://segmentfault.com/img/bVbB7lM
[bVbB7mD]: https://segmentfault.com/img/bVbB7mD

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关判断浏览器版本是否是ie9以下浏览器，提示升级

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png] (function(window) { var theUA

快来打我*/ 2023年10月11日 14:58/ 0 赞/ 25 阅读

相关关闭浏览器前提示_怎么关闭是否设为默认浏览器的提示？

怎么关闭是否设为默认浏览器的提示？为了方便工作，我们有时候，会在电脑上安装多个浏览器来使用，但是每一款浏览器都是希望用户将自己设为默认浏览器，所以每次打开浏览器都会受到提示

柔光的暖阳◎/ 2023年01月06日 11:57/ 0 赞/ 185 阅读

相关 html提示更新浏览器的代码,IE9及以下浏览器升级提示

在使用react的项目中一般都有兼容性问题，特别是使用了组件库比如element-react或者ant-design等等，在ie下多少都会有点小问题，比如样式不正确，或者组件功

痛定思痛。/ 2022年10月06日 12:49/ 0 赞/ 248 阅读

相关如何解决IE9以下的浏览器对html5标签不兼容的问题

在html页面的头部添加如下代码： <!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn

我就是我/ 2022年08月20日 11:20/ 0 赞/ 201 阅读

相关兼容IE9以下和非IE浏览器的原生js事件绑定函数

事件绑定函数的demo如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht

水深无声/ 2022年08月08日 07:01/ 0 赞/ 177 阅读

相关 springMVC IE9浏览器 jQuery的json数据拦截提示下载或者保存解决方法

在做电商项目是遇到一个问题： json 提交数据时，IE提示需要保存或者下载...... 解决方法： springMVC.xml配置： <mvc:annotation-

绝地灬酷狼/ 2022年08月06日 01:08/ 0 赞/ 130 阅读

相关网页访问IE8以下CLOSE浏览器

<script language="javascript"> /var IeMsg="请使用ie8以上浏览器";/ var flag = true;

素颜马尾好姑娘i/ 2022年07月12日 01:15/ 0 赞/ 213 阅读

相关 IE9以下浏览器处理方案_ html5shiv.js和respond.min.js

做页面常用的东西，写这里用的时候省点去找了。。。 html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。 respond.min

墨蓝/ 2022年05月28日 03:25/ 0 赞/ 115 阅读

相关判断浏览器版本并给出升级提示

(function (window) { function getBrowserInfo () { var agent = navigat

绝地灬酷狼/ 2022年05月14日 02:11/ 0 赞/ 201 阅读

相关微信内部浏览器打开网页时提示外部浏览器打开升级版

微信中下载app共有两种实现方式，然而安卓手机跟苹果手机还尽然不同。 1、苹果用户打开后要么自动调起App Store下载（前提是你的应用在苹果商店上架了）；要么

刺骨的言语ヽ痛彻心扉/ 2022年01月12日 14:15/ 0 赞/ 465 阅读