Je suis nouveau en Javascript et j'ai besoin d'aide pour créer un script qui ajoute «onclick» aux liens href d'une classe particulière sur une page HTML, lors du chargement de la page - en utilisant l'URL href du lien, sans toucher au code en ligne . Le script modifierait un lien régulier, de ce
window.onload = function() {
// Saving all links with XYZ-class in a variable
let links = document.getElementsByClassName('XYZ');
// Iterating through the links, changing the onclick attribute
for(let i = 0; i < links.length; i++) {
// Saving the URL
let grabbedURL = links[i].getAttribute('href');
// Putting it in onclick
links[i].setAttribute('onclick', `location.href='${grabbedURL}'`);
// Replacing href with '#'
links[i].setAttribute('href', '#');
}
à ceci:
<a href="#" onclick="location.href='URL';" class="XYZ">
L'URL change pour chaque lien mais la classe reste la même. Voici ce que j'ai obtenu jusqu'à présent, mais je me demandais si cela pouvait être amélioré:
<a href="URL" class="XYZ">
5 Réponses :
Voici une approche utilisant un pour ... de boucle ; vous pouvez changer cela si vous le souhaitez:
<body> <a href="https://example.com/" class="XYZ">http://example.com/</a> <br> <a href="https://foo.bar/" class="XYZ">http://foo.bar/</a> </body>
// iterate through all results of a css selector
for (let link of document.querySelectorAll('a.XYZ')) {
// set onclick attribute as text
link.setAttribute('onclick', 'location.href = ' + JSON.stringify(link.href) + ';');
// set href attribute to empty anchor (#)
link.href = '#';
}
Il pourrait y avoir des solutions plus modernes à votre problème en utilisant EventTarget.addEventListener () , mais jusqu'à présent, c'est ce que vous avez demandé. Si vous avez une question à propos de cette réponse, veuillez écrire un commentaire en dessous.
Et comme vous débutez dans Stack Overflow: si vous avez une réponse utile à votre question, vous pouvez la marquer comme acceptée. De cause seulement si tu veux. Cela ne doit pas être le mien.
J'ai utilisé document.querySelectorAll au lieu de document.getElementsByClassName pour m'assurer qu'il s'agit d'un lien ( a ) qui peut fournir un href < / code> attribut. Un sélecteur encore meilleur que a.XYZ serait a.XYZ [href] . Voir Référence du sélecteur CSS
Mieux encore, utilisez la délégation d'événements et créez simplement un gestionnaire d'événements.
Placer ceci dans votre JS devrait le faire:
const convert = () => {
const links = document.querySelectorAll("a");
for(let i = 0; i < links.length; i++){
let href = links[i].getAttribute("href");
let handleClick = () => {
console.log("the url is:",href)
window.location.href = href;
}
links[i].onclick = handleClick;
links[i].setAttribute("href","#");
}
}
convert();
Mieux encore, utilisez la délégation d'événements et créez simplement un gestionnaire d'événements.
Merci Pavlos! Votre code fonctionne, mais pour tous les liens - j'avais besoin de modifications pour une seule classe de liens sur une page.
changer querySelectorAll ("a") en querySelectorAll (". your-class-name") qui dans votre cas serait querySelectorAll (". XYZ")? Assurez-vous qu'il y a un "." pour signifier la classe.
Merci Pavlos!
document.getElementsByClassName('XYZ')[0].setAttribute("onclick","location.href='URL' ")
Try this..For after page load effect add script at the very end of your body tag
Si je comprends votre question, je pense que vous voulez quelque chose comme ceci:
function updateLink() {
var link = document.getElementById("linkId");
link.setAttribute('href', "http://google.com");
}
Ensuite, ajoutez simplement un "identifiant" à votre lien. Ou récupérez la classe plutôt que l'identifiant.
Les id font du code fragile et gonflé. De plus, au lieu de setAttribute () (qui fonctionne), vous pouvez simplement définir la propriété .href de l'élément directement.
Je pense que vous manquez peut-être un point plus important ici. Une ancre est conçue pour la navigation, si vous voulez changer la destination, ne définissez pas un Et, pour ce faire de la manière la plus simple, utilisez délégation d'événements , où nous tirons parti du fait que les événements remontent de leur origine au Voici un exemple: p > onclick puis désactivez le href , mettez simplement à jour le href code> là où vous voulez aller. document . Nous créons juste un gestionnaire d'événements sur un ancêtre commun de tous les éléments en question et gérons le même là. Lorsque nous le faisons, nous vérifions si l'événement provient d'un élément qui nous tient à cœur en utilisant event.target et si c'est le cas, nous agissons en conséquence.
<p>Click the links below. Only the XYZ links will take you to example.com</p>
<a href="URL" class="XYZ">XYZ</a>
<a href="URL" class="abc">abc</a>
<a href="URL" class="qrs">qrs</a>
<a href="URL" class="XYZ">XYZ</a>
<a href="URL" class="zzz">zzz</a>
<a href="URL" class="XYZ">XYZ</a>
<a href="URL" class="aaa">aaa</a>
<a href="URL" class="XYZ">XYZ</a>
let url = "https://example.com";
// Set an event listener on the document itself
document.addEventListener("click", function(event){
// Check to see if the event originated at an
// element we want to handle.
if(event.target.nodeName === "A" && event.target.classList.contains("XYZ")){
// Just update the href of the element
event.target.href = url;
}
});
Comme je l'ai souligné dans un commentaire ci-dessus, je dois forcer une actualisation de page à chaque fois qu'un lien est cliqué (en raison d'un problème avec un plugin Wordpress) - donc 'onclick' fait l'affaire. Ce n'est peut-être pas la meilleure solution, mais celle que je connaissais. Merci pour votre suggestion.
Veuillez mettre à jour votre question avec votre segment de code JS qui nous montre votre meilleure tentative pour résoudre ce problème vous-même, et expliquez à quel point vous rencontrez un problème.
Curieux de savoir pourquoi vous pensez que vous devez faire cela. Le résultat final sera exactement le même comportement dans le navigateur lorsque l'utilisateur clique sur le lien
Pourquoi ne pas simplement changer le
hrefdes liens avec une classe particulière?Bonjour, j'en ai besoin pour forcer le rechargement d'une page pour la navigation par onglets de mon Wordpress LMS. Cela permet d'éviter que les codes courts natifs de Wordpress ne s'affichent correctement lorsque les pages sont chargées à partir du cache et non du serveur. L'onclick force une actualisation de la page à partir du serveur.