无法显示IE 8或向下没有支持消息

我使用reactjs和webpack创建了一个网站，我正在使用Modernizr来表示对特定功能的支持，但是我想在IE 8中显示一条消息，下面我不支持这些浏览器。问题在于，加载网站时，由于WebPack和React不支持它，因此它会失败。我的问题是，如何显示消息？有没有办法在反应负载之前显示它？或者，也许有一种方法可以使它仅适用于该消息？

感谢您的帮助！

您可以使用条件注释来加载特殊CSS并仅在IE8中打印HTML。

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]-->

您甚至可以在<head>中加载CSS：

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

请检查一下，我使用了简单的Java脚本来识别浏览器＆amp;和它的版本。将出现弹出消息，并将提供适当的消息 - 如果版本兼容，则加载站点否则请阻止用户提前进行 - 以下是简单的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>

相关内容

最新更新

热门标签：