我使用reactjs和webpack創建了一個網站,我使用modernizr來顯示對特定功能的支持,但我想在IE 8和以下版本中顯示一條消息,表示我不支持這些瀏覽器。問題是當加載網站時,它會失敗,因爲webpack和反應不支持它。 我的問題是,我如何顯示消息?有什麼方法可以在反應加載之前顯示它?或者可能有一種方法可以讓它爲那個消息工作?無法顯示IE 8和關閉不支持消息
感謝您的幫助!
我使用reactjs和webpack創建了一個網站,我使用modernizr來顯示對特定功能的支持,但我想在IE 8和以下版本中顯示一條消息,表示我不支持這些瀏覽器。問題是當加載網站時,它會失敗,因爲webpack和反應不支持它。 我的問題是,我如何顯示消息?有什麼方法可以在反應加載之前顯示它?或者可能有一種方法可以讓它爲那個消息工作?無法顯示IE 8和關閉不支持消息
感謝您的幫助!
您可以使用條件註釋來加載特殊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腳本識別瀏覽器&及其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">×</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>
+包括應用JS在「GTE IE 9」和/或「不是IE」條件註釋所以它甚至不必須下載。 – pawel
這實際上很好吃,是否有像這樣的其他瀏覽器btw的解決方案? IE是我的主要問題,但可以說,有沒有一種方法來制定一個條件,不具體說IE X? –
我不這麼認爲,甚至更新的IE不支持它(從官方文檔:*從Internet Explorer 10開始,標準模式不再支持條件註釋。使用功能檢測爲網站功能提供有效的回退策略, t由瀏覽器支持。有關標準模式的更多信息,請參閱定義文檔兼容性*)。但是,您可以使用它沒有任何問題,因爲IE版本9以下。 –