Script pour navigateur autre que Google Chrome

**pito2901** · 24/11/2013, 20h01

Je dispose du code suivant, et j'aimerai l'appliquer que si le navigateur est différent de Google Chrome, je ne forces pas l'utilisateur à le télécharger, juste l'avertir que le site n'est pas entièrement configuré jusqu'à présent pour d'autres navigateurs (surtout IE):

J'ai vu quelques discussions sur le net à propos du appName, mais je n'arrive pas à comprendre et à l'appliquer sur mon code JS.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#SiPasGoogleChrome {
z-index:1000000;
position: absolute;
top: 300px;
left:40%;
width:520px;
height:50px;
text-align:left;
color: #0090FF;
padding:5px;
background-color:black;
border: 3px solid #0090FF;
border-radius: 10px;
font-size: 15px;
font-weight : bold;
}
#SiPasGoogleChrome span{
z-index:1000002;
position:absolute;
left:10px;
top:12px;
transition: all 1s; 
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#SiPasGoogleChrome #GC{
z-index:1000001;
left:472px;
filter: saturate(100%);
-webkit-filter: saturate(100%);
-moz-filter: saturate(100%);
-o-filter: saturate(100%);
position:relative;
height:50px;
width:50px;
transition: all 0.5s; 
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
 
#SiPasGoogleChrome #GC:hover{
filter: saturate(200%);
-webkit-filter: saturate(200%);
-moz-filter: saturate(200%);
-o-filter: saturate(200%);
cursor:pointer;
}
 
#grisement{
position: fixed;
z-index:999999;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
opacity:0.5;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div  id="grisement" style=""></div>
<div id="SiPasGoogleChrome">
<a href="http://www.google.fr/intl/fr/chrome/browser/" target="_blank"><img id="GC" src="http://i.pcworld.fr/1205791-chrome-10-logo.png" title="Télécharger" /></a>
<span>
Si vous n'utiliser pas le navigateur Google Chrome,<br />
Il est fortement recommander de l'utiliser pour ce blog.
</span>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
var IMG = document.getElementById('GC');
var DIV = document.getElementById('SiPasGoogleChrome');
var GRIS = document.getElementById('grisement');
var WIDGET = document.getElementsByClassName('.tabs-outer');
 
IMG.onclick = function(){
  IMG.flag = true;
  DIV.style.visibility='hidden';
  IMG.style.visibility='hidden';
  GRIS.style.visibility='hidden';
  WIDGET.style.visibility='hidden';
;}

Aperçu.

Merci de votre aide.

**SylvainPV** · 24/11/2013, 20h18

Bon, il y a déjà du mieux dans la démarche. Au moins tu n'envoies pas complètement promener les utilisateurs de Firefox, Opera, IE11 et autres navigateurs tout à fait convenables. C'est un premier pas avant de parvenir à un support complet et uniforme de tous les navigateurs. Tu peux pour le moment faire un test comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if(navigator.userAgent.indexOf("Chrome") === -1){
//on suppose que ce n'est pas Chrome
 }

Mais ne t'arrête pas en si bon chemin, et essaie de régler les problèmes que tu rencontres avec les autres navigateurs. Cela augmentera l'audience de ton blog et ne rendra pas furax les adeptes de Firefox et Opera (car si tu prêches Chrome comme religion, il en va de même pour d'autres avec d'autres navigateurs...)

**pito2901** · 24/11/2013, 20h22

Envoyé par SylvainPV

Mais ne t'arrête pas en si bon chemin, et essaie de régler les problèmes que tu rencontres avec les autres navigateurs. Cela augmentera l'audience de ton blog et ne rendra pas furax les adeptes de Firefox et Opera (car si tu prêches Chrome comme religion, il en va de même pour d'autres avec d'autres navigateurs...)

Je suis bien d'accord avec ça, je teste et je vous tiens au courant.

EDIT: Ce script ne fonctionne pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var IMG = document.getElementById('GC');
var DIV = document.getElementById('SiPasGoogleChrome');
var GRIS = document.getElementById('grisement');
var WIDGET = document.getElementsByClassName('.tabs-outer');
 
if(navigator.userAgent.indexOf("Chrome") === -1){
IMG.onclick = function(){
  IMG.flag = true;
  DIV.style.visibility='hidden';
  IMG.style.visibility='hidden';
  GRIS.style.visibility='hidden';
  WIDGET.style.visibility='hidden';
;}
 }

**NoSmoking** · 25/11/2013, 22h29

Bonjour,
je prendrais le problème à l'envers.
L'avertissement étant masqué par défaut, display:none, il suffit de le faire apparaître si l'on ne détecte pas le navigateur chrome.

EDIT: Ce script ne fonctionne pas:

cela ne nous aide pas beaucoup sur le dysfonctionnement constaté par rapport à l'attendu.

Quoi qu'il en soit de nos jours aucunes raisons de ne pas arriver à concilier TOUS les navigateurs avec ton code.

**pito2901** · 25/11/2013, 22h32

Envoyé par NoSmoking

L'avertissement étant masqué par défaut, display:none, il suffit de le faire apparaître si l'on ne détecte pas le navigateur chrome.

Et ça donne quoi au niveau du code ? Car je suis complètement largué.

**NoSmoking** · 25/11/2013, 22h40

Voici un petit exemple perfectible mais c'est un point de départ

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Avertissement</title>
<style>
#avertissement{
  display:none;
  margin:25% auto;
  padding:1em;
  width:25em;
  border:1px solid red;
  text-align:center;
}
</style>
</head>
<body>
<div id="avertissement">
  Si vous n'utiliser pas le navigateur Google Chrome,
  Il est fortement recommander de l'utiliser pour ce blog.
</div>
<script>
if( navigator.userAgent.indexOf( 'Chrome') < 0){
  document.getElementById('avertissement').style.display = 'block';
}
</script>
</body>
</html>

**Bovino** · 26/11/2013, 09h12

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

navigator.userAgent.indexOf("Chrome") === -1

Ah... tu veux cibler Opera aussi ? Peut-être Safari aussi du reste...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<span>
Si vous n'utiliser pas le navigateur Google Chrome,<br />
Il est fortement recommander de l'utiliser pour ce blog.
</span>

Ou comment revenir aux pires pratiques des années 90... fautes d'orthographe en plus

**pito2901** · 26/11/2013, 19h39

Je vous remercie mais à présent ça ne s'affiche plus, mais aussi sur Mozilla et IE à cause du style css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<style>
#ensembleSPGC{
display:none;
}

#SiPasGoogleChrome {
z-index:1000000;
position: absolute;
top: 300px;
left:40%;
width:520px;
height:50px;
text-align:left;
color: #0090FF;
padding:5px;
background-color:black;
border: 3px solid #0090FF;
border-radius: 10px;
font-size: 15px;
font-weight : bold;
}
#SiPasGoogleChrome span{
z-index:1000002;
position:absolute;
left:10px;
top:12px;
transition: all 1s; 
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#SiPasGoogleChrome #GC{
z-index:1000001;
left:472px;
filter: saturate(100%);
-webkit-filter: saturate(100%);
-moz-filter: saturate(100%);
-o-filter: saturate(100%);
position:relative;
height:50px;
width:50px;
transition: all 0.5s; 
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

#SiPasGoogleChrome #GC:hover{
filter: saturate(200%);
-webkit-filter: saturate(200%);
-moz-filter: saturate(200%);
-o-filter: saturate(200%);
cursor:pointer;
}

#grisement{
position: fixed;
z-index:999999;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
opacity:0.5;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="ensembleSPGC">
<div  id="grisement" style=""></div>
<div id="SiPasGoogleChrome">
<a href="http://www.google.fr/intl/fr/chrome/browser/" target="_blank"><img id="GC" src="http://i.pcworld.fr/1205791-chrome-10-logo.png" title="Télécharger" /></a>
<span>
Si vous n'utiliser pas le navigateur Google Chrome,<br />
Il est fortement recommander de l'utiliser pour ce blog.
</span>
</div>
</div>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if(navigator.userAgent.indexOf("Chrome") < 0){
document.getElementById('ensembleSPGC').style.display = '';
}

**NoSmoking** · 26/11/2013, 21h02

document.getElementById('ensembleSPGC').style.display = '';

A quoi sert-il que je te mette un exemple

document.getElementById('avertissement').style.display = 'block';

**pito2901** · 26/11/2013, 22h34

Heu... Oui, j'avais testé avec 'block', et cela marche très bien, sauf que quand je le fais avec Mozilla par ex, quand je clique sur l'image, et bien le reste ne s'efface plus, dois-je remettre avec le code d'avant ? Si oui, comment ?

**pito2901** · 26/11/2013, 22h41

J'ai trouvé en fait:

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var IMG = document.getElementById('GC');
var SPGC = document.getElementById('ensembleSPGC');
if(navigator.userAgent.indexOf("Chrome") < 0){
document.getElementById('ensembleSPGC').style.display = 'block';
IMG.onclick = function(){
IMG.flag = true;
SPGC.style.visibility='hidden';
;}
}

Je vous remercie beaucoup jusqu'à présent

, mais j'ai voulu créer un autre topic, certes avec le même code mais un problème différent et un modérateur l'a supprimé, c'étais pour savoir comment peux-t-on afficher une seule fois ce message dans mon blog, genre s'il ouvre l'accueil, et bien le message s'affichera qu'à l'accueil et pas dans les pages suivantes... (Mais si il commence en ouvrant une autre page aussi...) ?

Merci de votre aide.

Script pour navigateur autre que Google Chrome

JavaScript

Discussions similaires

Partager

Partager