react在部分安卓手机浏览器无法加载页面或页面空白

本文详细介绍了在公司自研管理系统中遇到的浏览器兼容性问题及解决方案,包括引入babel-polyfill、es5-shim等库解决旧版浏览器显示问题,以及使用isomorphic-fetch和axios替换fetch解决特定机型登录失败的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

公司有一套自己开发的管理系统,因为使用的人少,虽然一直有很多浏览器兼容的bug,但是因为偷懒(说白了因为这些bug自己没遇到过,没感受过,反正不影响自己)一直没处理,遇到bug的人群就喊他们去用chrome浏览器去直接在QQ或者微信里直接打开,终于有一天由于一项新业务不得不使用手机默认浏览器进行打开,自己也遇到了这个bug不得不想办法开始解决,so,一阵百度猛如虎(为啥不用google?翻墙懒得找办法,朋友介绍的翻墙软件又嫌贵,ps:绝对不是我英语太差的原因),找了很多个方法,最终终于勉强解决了页面空白的原因:

1、主js文件中引入babel-polyfill,这个方法网上介绍的文章很多,我这里就不多介绍了,这个方法能解决少部分浏览器无法显示,不要问我少部分浏览器是哪些,我自己也不清楚

2、html文件中引入如下js文件,能够解决部分荣耀机型自带浏览浏览器无法加载react页面的现象

 <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-sham.min.js"></script>

3、react单页面应用,浏览器能够加载部分react页面,但是跳转到某些页面的时候会空白,这种原因可能是因为页面使用fetch,fetch是不兼容ie的,所以需要引用

import 'isomorphic-fetch';

加入这个之后成功解决魅蓝机型默认浏览器页面空白,但是fetch无法使用。

PS:魅蓝手机浏览器点击登陆按钮疑似无法成功发送fetch请求。

华为手机浏览器点击登陆按钮能够发送出去fetch请求但无法成功登陆

4、大概是fetch不支持ie,最终决定项目抛弃fetch,使用axios

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值