Discussion :

[crastinette]

Bonjour,

Comment puis-je mettre un style dans cette partie de script ?

Code javascript :

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

1
2
 
<script>document.addEventListener('DOMContentLoaded', function(event){cookieChoices.showCookieConsentBar('This site uses cookies to offer you the best service. By continuing your navigation, you accept the use of cookies.','✓ Accept', 'Learn more', 'http://site/legal_notice.php');});</script>

quelque chose comme ça mais en javascript ? ,<span style="background-color:#ffffff">'✓ Accept'</span>,

Merci beaucoup

[SpaceFrog]

https://javascript.developpez.com/fa...ript/?page=CSS
https://javascript.developpez.com/fa...css.javascript

[Watilin]

quelque chose comme ça mais en javascript ? ,<span style="background-color:#ffffff">'✓ Accept'</span>,

Bonsoir,
étant donné que la fonction semble déjà accepter du code HTML, à en juger par l’entité ✓, tu ne devrais pas avoir de problèmes à écrire ceci :

Code :

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

cookieChoices.showCookieConsentBar( ..., '<span style="background-color:#ffffff">✓ Accept</span>', ... );

Sauf si la fonction supprime expressément le HTML des arguments que tu lui passes. Mais ce sera probablement indiqué dans la documentation… S’il y en a une, car en ce qui me concerne, je n’en ai pas trouvé. Il s’agit bien du cookieChoices de Google ?

[crastinette]

Bonjour Watilin,

Merci pour ta réponse, il s'agit bien du cookiechoices.js de google mais la fonction n'accepte pas de code html, j'ai du récupérer un code qui ne comportait une erreur avec ce rajout de l’entité ✓.
J'aimerai bien pouvoir mettre un fond et une autre couleur sur le bouton accept mais je ne maîtrise pas suffisamment le javascript pour le faire.

Merci

[crastinette]

Le code peut être modifié dans le fichier cookiechoices.js, j'ai pu mettre ce que je voulais comme style.

Voici un exemple :

Code javascript :

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
 
 function _createDismissLink(dismissText) {
      var dismissLink = document.createElement('a');
      _setElementText(dismissLink, dismissText);
      dismissLink.id = dismissLinkId;
      dismissLink.href = '#';
      dismissLink.style.marginLeft = '15px';
      dismissLink.style.color = '#FFFFFF';
	  dismissLink.style.backgroundColor = '#2e9db0';
	  dismissLink.style.fontSize = '16px';
	  dismissLink.style.padding = "5px 5px 5px 5px";
      return dismissLink;
    }
 
    function _createInformationLink(linkText, linkHref) {
      var infoLink = document.createElement('a');
      _setElementText(infoLink, linkText);
      infoLink.href = linkHref;
      infoLink.target = '_blank';
      infoLink.style.marginLeft = '15px';
      infoLink.style.color = '#2e9db0';
	  infoLink.style.fontSize = '16px';
      return infoLink;
    }

En attendant, merci pour l'aide apportée ;-)

[Watilin]

Un gros bravo à Google pour avoir fait une page qui apparaît en première position dans toutes les recherches, et qui ne fournit absolument aucune doc ni même aucun lien vers le fichier js. C’est incroyable ! J’ai dû trouver le fichier sur un blog lambda, alors j’espère que c’est le bon (a priori il date de 2014).

Dans le fichier que j’ai trouvé, il y a ce passage :

Code :

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

1
2
3
4
5
6
7
8
9
10
        function _setElementText(element, text) {
            // IE8 does not support textContent, so we should fallback to innerText.
            var supportsTextContent = 'textContent' in document.body;
 
            if (supportsTextContent) {
                element.textContent = text;
            } else {
                element.innerText = text;
            }
        }

On y voit que le script utilise textContent (ou innerText quand textContent n’est pas supporté). C’est à cet endroit que ton code HTML est « neutralisé ».

Le script manipule du CSS à certains endroits, mais je ne crois pas qu’il offre une possibilité d’ajouter du style depuis l’extérieur.
Du coup, on a deux solutions :

1. modifier le script lui-même, comme tu as fait  ;
2. détecter le HTML injecté par le script pour le modifier après coup, ce qui est un peu sale mais demande peu d’efforts.

Au cas où ça intéresse toi ou quelqu’un d’autre, et parce que j’avais déjà commencé à l’écrire (), voici la marche à suivre pour la seconde solution.

Étant donné qu’aucun des éléments injectés n’a d’id ni de classe, le meilleur moyen de repérer un des éléments injectés est de cibler le lien, car il y a peu de chances qu’un autre lien avec la même adresse soit présent dans la page.

Code :

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

document.querySelector('a[href="http://site/legal_notice.php"]')

La structure qui est injectée dans le <body> ressemble à ça :

Code html :

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

1
2
3
4
5
6
7
<body>
    <div> (cookieConsentElement)
        <div> (wrapper)
            <span> (consentText)
            <a>    (informationLink)
            <a>    (dismissLink)
        <a>   (dismissIcon)

informationLink est l’élément qu’on est capable de cibler. dismissLink est celui que tu veux modifier. Pour l’atteindre, il suffit :

1. de remonter au parent (wrapper) ;
2. de sélectionner le second lien.

Le second lien est également facile à sélectionner à partir du wrapper, car il a un attribut href="#".
(On aurait pû utiliser nextSibling ou nextElementSibling, mais je ne suis pas fan : c’est moins lisible, et peu résistant au changement.)
Ainsi :

Code :

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

1
2
3
var informationLink = document.querySelector('a[href="http://site/legal_notice.php"]');
var wrapper = informationLink.parentElement;
var dismissLink = wrapper.querySelector('a[href="#"]');

Et il ne te reste plus qu’à ajouter le style que tu veux :

Code :

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

dismissLink.style.backgroundColor = 'white';

En ce qui concerne l’entité, tu peux la convertir en séquence unicode. Il faut commencer par convertir le code en base hexadécimale. Tu peux le faire facilement dans la console F12 :

Code :

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

1
2
(10003).toString(16)
// -> "2713"

Ensuite tu rajoutes '\u' devant et ça te permet d’avoir le symbole dans une chaîne JS tout en évitant les problèmes d’encodage.

Code :

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

'\u2713 Accept'

Un dernier conseil : vu que tu utilises la même adresse à plusieurs endroits dans le code, je te conseille d’en faire une constante, ça te permettra de n’avoir qu’une seule ligne de code à changer si jamais tu souhaites la modifier par la suite.

Code :

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
const INFO_LINK_URL = 'http://site/legal_notice.php';
 
document.addEventListener('DOMContentLoaded', function (event) {
  cookieChoices.showCookieConsentBar(
    'This site uses cookies to offer you the best service. By continuing your navigation, you accept the use of cookies.',
    '\u2713 Accept',
    'Learn more',
    INFO_LINK_URL
  );
 
  var informationLink = document.querySelector('a[href="' + INFO_LINK_URL + '"]');
  var wrapper = informationLink.parentElement;
  var dismissLink = wrapper.querySelector('a[href="#"]');
 
  dismissLink.style.color = 'white';
  dismissLink.style.backgroundColor = '#2e9db0';
  dismissLink.style.fontSize = '16px';
  dismissLink.style.padding = '5px';
});

[crastinette]

Merci, c'est très intéressant comme solution, je conserve, merci pour ces recherches très fructueuses.

Il est vrai que le code cookiechoices.js n'est pas disponible, ni les informations qui vont avec, j'ai également récupérer le script sur un site lambda.
C'est assez curieux...
Bonne journée