react在部分安卓手機瀏覽器無法加載頁面或頁面空白

公司有一套自己開發的管理系統,因爲使用的人少,雖然一直有很多瀏覽器兼容的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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章