Skip to content

Instantly share code, notes, and snippets.

@nidorx

nidorx/README.md

Last active August 22, 2017 20:31
Show Gist options
  • Save nidorx/f9e77e1c0553921096976ecf24f3f0b8 to your computer and use it in GitHub Desktop.
Save nidorx/f9e77e1c0553921096976ecf24f3f0b8 to your computer and use it in GitHub Desktop.
Download ZIP
Mensagem Compatibilidade IE
Raw
README.md

#Mensagem Compatibilidade IE

tela

Simples funcionalidade para exibir mensagem bloqueante quando o navegador é o IE.

Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina Vazia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#00bcd4">
<style>
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
font-size: 15px;
line-height: 1.5;
font-family: 'Helvetica', 'Arial', sans-serif;
font-weight: normal;
color: rgba(0, 0, 0, 0.87);
}
a {
color: #039be5;
text-decoration: none;
}
#aviso-ie-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
overflow: hidden;
overflow-y: auto;
background-color: #eee;
}
.aviso-ie {
text-align: center;
padding: 0;
display: block;
margin: 40px auto 0;
}
.aviso-ie-dialog {
max-width: 600px;
display: inline-block;
vertical-align: middle;
border: 1px solid #ccc;
text-align: center;
background: #fff;
}
.aviso-ie-content {
border: 0;
border-radius: 0;
}
.aviso-ie-header {
border: 0;
padding: 0;
position: relative;
color: #fff;
background-color: #0277bd;
height: 64px;
line-height: 64px;
font-size: 16px;
font-weight: bold;
}
.aviso-ie-header #logo-projeto {
float: left;
height: 100%;
}
.aviso-ie-content p {
padding: 0;
}
.aviso-ie-content .secao-compativeis {
border-top: 1px dashed #ddd;
padding-top: 15px;
}
.aviso-ie-body .lista-navegador li {
display: inline-block;
}
.aviso-ie-body .icone-navegador {
width: 150px;
height: auto;
text-align: center;
font-size: 12px;
font-weight: 700;
display: inline-block;
}
.aviso-ie-body .icone-navegador span {
background: url(./browsers-bg.png) no-repeat;
background-size: auto 100px;
position: relative;
width: 100px;
height: 100px;
display: block;
margin: 0 auto 10px;
}
.aviso-ie-body .icone-navegador.chrome span {
background-position: 0 0;
}
.aviso-ie-body .icone-navegador.firefox span {
background-position: -100px 0;
}
.aviso-ie-body .icone-navegador.ie span {
background-position: -200px 0;
}
</style>
</head>
<body>
<app-root id="app-root"></app-root>
<!--Mensagem de aviso de incompatibilidade quando usado no Internet Explorer-->
<div id="aviso-ie-container" style="display: none">
<div class="aviso-ie">
<div class="aviso-ie-dialog">
<div class="aviso-ie-content">
<div class="aviso-ie-header">
<div id="logo-projeto" class="valign-wrapper">
<img class="valign" src="assets/img/logo_projeto.png" style="margin-left: 10px;" alt="${PROJETO}">
</div>
Aviso de compatibilidade do navegador
</div>
<div class="aviso-ie-body">
<div>
<table>
<tbody>
<tr>
<td>
<div class="icone-navegador ie">
<span></span>
</div>
</td>
<td>
<strong><b>O Internet Explorer não é compatível com o ${PROJETO}</b></strong>
<p>
O <strong>Internet Explorer</strong> possui falhas em ferramentas do HTML5,
afetando na exibição dos componentes de interface necessários para o funcionamento
do <strong>${PROJETO}</strong>.
</p>
<p>
Por favor, considere migrar para outro navegador.
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="secao-compativeis">
<strong><b>O ${PROJETO} funciona nos seguintes navegadores:</b></strong>
<ul class="lista-navegador">
<li>
<a href="https://www.google.com/chrome/browser/desktop/" class="icone-navegador chrome" target="_blank">
<span></span>
Google Chrome
</a>
</li>
<li>
<a href="https://www.mozilla.org/pt-BR/firefox/new/" class="icone-navegador firefox" target="_blank">
<span></span>
Mozilla Firefox
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
(function () {
//event listener: DOM ready
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
if (oldonload) {
oldonload();
}
func();
}
}
}
//call plugin function after DOM ready
addLoadEvent(function () {
// https://stackoverflow.com/a/44929931
// Get IE or Edge browser version
var version = detectIE();
if (version !== false || true) {
document.getElementById('aviso-ie-container').style.display = 'block';
document.getElementById('app-root').style.display = 'none';
}
/**
* detect IE
* returns version of IE or false, if browser is not Internet Explorer
*/
function detectIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
}
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment