2017-02-23 42 views
0

Я создал веб-сайт с помощью reactjs и webpack, я использую modernizr для отображения поддержки определенных функций, но я хочу показать сообщение в IE 8 и ниже, что я не поддерживаю эти браузеры. проблема в том, что при загрузке веб-сайта он терпит неудачу, так как webpack и реакция не поддерживают его. мой вопрос в том, как я могу отобразить сообщение? есть ли способ показать это перед реактивными нагрузками? или, может быть, есть способ заставить его работать только для этого сообщения?не может отображать IE 8 и ни о каком сообщении поддержки

благодарит за помощь!

ответ

3

Вы можете использовать условные комментарии для загрузки специального CSS и печати HTML только в IE8.

http://www.quirksmode.org/css/condcom.html

Пример:

<!--[if lte IE 8]> 
<p class="unsupported-ie">This page is not supported for IE8 and lower versions of IE.</p> 
<![endif]--> 

И вы можете даже CSS нагрузки в <head>:

<!--[if lte IE 8]> 
<link media="all" rel="stylesheet" href="/unsupported-ie.css" /> 
<![endif]--> 
+0

+ включают приложения JS в «GTE т.е. 9» и/или «не то есть» условный комментарий, так что даже не должны быть загружены. – pawel

+0

thats действительно preetey хорошо, есть ли решения, подобные этому для других браузеров, кстати? IE - моя главная проблема, но, допустим, есть способ сделать условие, которое специально не говорит IE X? –

+0

Я так не думаю, что даже новый IE не поддерживает его (из официальной документации: * Как и в Internet Explorer 10, условные комментарии больше не поддерживаются стандартным режимом. Используйте функцию обнаружения, чтобы обеспечить эффективные стратегии возврата для функций веб-сайта, t, поддерживаемый браузером. Дополнительные сведения о стандартном режиме см. в разделе Определение совместимости документов. *). Но вы можете использовать его без каких-либо проблем для IE до версии 9. –

0

Пожалуйста, проверьте это, я использовал простой Java скрипт для идентификации браузера & и его version.A появится всплывающее сообщение и даст соответствующее сообщение, если версия совместима, а затем загрузите другой сайт, чтобы остановить Пользователь из ahead- исходя Ниже описана простая HTML-страница: -

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
       .modal { 
      display: none; /* Hidden by default */ 
      position: fixed; /* Stay in place */ 
      z-index: 1; /* Sit on top */ 
      padding-top: 100px; /* Location of the box */ 
      left: 0; 
      top: 0; 
      width: 100%; /* Full width */ 
      height: 100%; /* Full height */ 
      overflow: auto; /* Enable scroll if needed */ 
      background-color: rgb(0,0,0); /* Fallback color */ 
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
     } 

     /* Modal Content */ 
     .modal-content { 
      background-color: #fefefe; 
      margin: auto; 
      padding: 20px; 
      border: 1px solid #888; 
      width: 80%; 
     } 

     /* The Close Button */ 
      .close { 
       color: #aaaaaa; 
       float: right; 
       font-size: 28px; 
       font-weight: bold; 
       } 

      .close:hover, 
      .close:focus { 
       color: #000; 
       text-decoration: none; 
       cursor: pointer; 
      } 
    </style> 
</head> 
<body onload="IEValidationMessage();"> 

    <!-- this is the DIV used for showing message box --> 
    <div id="myModal" class="modal"> 
     <div id="closeBtn" class="modal-content"> 
      <span class="close">&times;</span> 
      <div id="divMessagebody"></div> 
     </div> 
    </div> 

    <script> 
     // When the user clicks on <span> (x), close the modal 
     var modal = document.getElementById('myModal'); 
     var span = document.getElementById("closeBtn"); 
      span.onclick = function() { 
      modal.style.display = "none"; 
     } 
     // When the user clicks anywhere outside of the modal, close it 
      window.onclick = function (event) { 
      if (event.target == modal) { 
      modal.style.display = "none"; 
      } 
     } 
     function IEValidationMessage() { 
      modal.style.display = "block"; 
      if (document.documentMode < 9) { 
       document.getElementById("divMessagebody").innerHTML = "Please Use IE 9 or Above.)"; 
      } 
      else { 
      document.getElementById("divMessagebody").innerHTML = "congrats Site is compatible in this IE version "; 
     } 
     if (document.documentMode ==undefined) { 
      document.getElementById("divMessagebody").innerHTML = "Please use IE9 or higher only. "; 
     } 
    } 

    </script> 

    </body>