Bonjour,
J'essaie de créer une extension pour Google Chrome qui éxécute 2 fichiers JS (dont jQuery) sur n'importe quelle page web. Mais je pense que ma question concerne plus JavaScript d'une façon générale. Du coup, pour mieux illustrer mon problème, j'ai simulé l'effet de l'extension en chargeant en bas de page (juste avant </body>) les 2 scripts concernés :
http://mathiaspeguet.fr/test/index.php
Mon but est d'obtenir dans la console le chemin du DOM d'un élément lorsque je clique dessus, un peu comme le bouton loupe de l'inspecteur d'élément ou comme le bouton inspecterde firebug
Ça marche bien quand il n'y a pas d'autres JS qui intervient. On le voit quand on clique sur l'heure.
J'ai utilisé une instruction event.preventDefault(); pour pouvoir cliquer sur l'hyperlien "Réinitialiser" sans que ça recharge la page. Ça marche bien là aussi.
Par contre, ça ne marche pas sur l'hyperlien "Et Maintenant ?" parce qu'il est déclenché en JS.
Comment faire pour désactiver l'évènement onclick dans tous les autres scripts de n'importe quelle page sans que soit désactivé pour mon script ?
Pour info ou pour le confort de lecture :
content.js
index.php
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 console.log('content.js fonctionne bien.'); var chemin = "" $( document ).ready(function() { $( 'body' ).click(function( event ) { var element = event.target; // Élément cliqué var elbalise = ""; // Nom de la balise HTML while ( elbalise != "body" ) { // Parcours des parents elbalise = element.localName; var elclass = ( element.className ) ? '.'+element.className: "" ; // Nom de la class var elid = ( element.id ) ? '#'+element.id : "" ; ( chemin ) ? chemin = elbalise+elclass+elid+' '+chemin : chemin = elbalise+elclass+elid; // Nom de l'id element = element.parentElement; } console.log( "Clic sur : "+chemin ); event.preventDefault(); }); });
Code php : 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 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <p>- Il est <?php echo date ('H:i:s'); if ( $_GET['heure'] && is_string($_GET['heure']) ) { ?>, soit <?php echo time() - $_GET['heure']; ?> secondes de plus que tout à lheure ! <?php } ?></p> <p>- <a href="#" onClick="window.location.replace('index.php?heure=<?php echo time(); ?>');return false;">Et Maintenant ?</a></p> <p> </p> <p><a href="index.php">Réinitialiser</a></p> <!-- Simulation dinjection de Javascript depuis une extension Chrome --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="content.js"></script> </body> </html>
Partager