Блог

Я работаю над проектом узла, который использует create-react-app и webpack для объединения файлов JavaScript при создании веб-сайта. Я не собираюсь поддерживать IE, однако я хотел бы, чтобы пользователям, открывающим приложение с помощью IE, показывалось сообщение, поскольку по умолчанию приложение вылетает из-за отсутствия поддержки браузера с помощью create-react-app без полизаполнений.

Идея состоит в том, чтобы включить сообщение о загрузке в HTML-шаблон, используемый Webpack, который удаляется, когда React завершает рендеринг. В случае, если React не удалось отобразить должным образом или некоторые JS не поддерживаются браузером, сообщение о загрузке должно оставаться там. Однако, когда файлы JS включаются в браузер, вся страница просто становится пустой из-за ошибок в файлах JavaScript (т. Е. Из-за неподдерживаемых IE функций), и поэтому сообщение также исчезает.

Есть ли какой-либо способ предотвратить пустоту страницы и вместо этого сохранить HTML, который был там раньше?

Я предлагаю вам попробовать добавить полизаполнения ниже в начале index.js файла.

 import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
  

При необходимости добавьте другие полизаполнения.

Добавьте IE 11 разработку browserlist в package.json файл.

 "browserslist": {
    "production": [
      "ie 11",      
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
  

Удалите .cache папку внутри node_modules папки и снова попробуйте запустить приложение.

Приложение должно загружаться в браузере IE 11.

После этого попробуйте использовать приведенный ниже код JS и добавьте его в свое приложение react.

Приведенный ниже код идентифицирует браузер IE с помощью user agent, и вы можете отобразить полезное сообщение для пользователей.

  function detectIE() {
           var ua = window.navigator.userAgent;
         
           var msie = ua.indexOf('MSIE ');
           if (msie > 0) {
            
             return "IE "   parseInt( ua.substring(msie   5, ua.indexOf('.', msie)), 10);
           }
         
           var trident = ua.indexOf('Trident/');
           if (trident > 0) {
            
             var rv = ua.indexOf('rv:');
             return "IE "   parseInt(ua.substring(rv   3, ua.indexOf('.', rv)), 10);
           }

           // other browser
           return "false";
         }
         var result=detectIE();
         if (result=="false")
         {
            document.getElementById("info").innerHTML  ="<h2>Welcome to the site...</h2>";
         }
         else
         {
            document.getElementById("info").innerHTML  = "<h2>Dear user you are using "   result   " This browser is not supported by this site. Kindly use supported browser...</h2>";
         }
  

Кроме того, вы можете изменить пример кода в соответствии с вашими собственными требованиями.