document.body.innerHTML numéro

Question

J'ai un convertisseur de courrier électronique sur un site Web qui a été écrit par un autre développeur qui prend le nom d'utilisateur d'une personne et le formate à une adresse e-mail. Si vous tapez sur une page [[nom d'utilisateur]] il va générer une adresse e-mail cliquable sur la page Web: username@gmail.com

Maintenant, j'essaie d'intégrer PayPal passer à la navigation de l'accessibilité vers le site Web. Après avoir ajouté le code pour Pay Pal, lorsque j'appuie sur Tab, le lien "Passer à" apparaît en haut à gauche, mais le lien ne fonctionne pas. Ce qui signifie que le menu déroulant n'apparaîtra pas. https://github.com/paypal/skipto

Dans mon javascript convertisseur e-mail il y a une ligne de code

document.body.innerHTML = emailConvert (document.body.innerHTML);

Cela semble être le problème, car le code Paypal utilise également innerHTML dans leur code. Je recherche une solution pour cette ligne de code spécifique ou tout le code

document.body.innerHTML = emailConvert (document.body.innerHTML);

J'ai essayé différentes solutions sans résultat. Toute aide est la bienvenue. Voici le code:

$(document).ready(function() { 
    (function() { 
    var domains = { 'n': 'gmail.com', 'p': 'yahoo.com', 's': 'comcast.net', 'k': 'att.net', 'b': 'aol.com', 'i': 'sbcglobal.net' }; 
    function renderEmail(str, user, domain, text) { 
     var email = (user.match(/@/)) ? user : user + "@" + (domain || domains["n"]); 
     if (domains[user.toLowerCase()]) { email = domain + "@" + domains[user.toLowerCase()]; } 
     return " <a href='mailto:" + email + "?Subject=" + document.title + "\"'>" + (text || email) + "</a>"; 
    } 
    function emailConvert(source) { return source.replace(/\[\[\s*([^\ [\,\|]*)\|?\s*([a-zA-Z0-9_\.-]+)?\s*()\]\]/g, renderEmail).replace(/\[\[\s*([^\[\,\|]*)\|?\s*([a-zA-Z0-9_\.-]+)?\s*\,{1}\s*([^\]]*)\s*\]\]/g, renderEmail); } 
    document.body.innerHTML = emailConvert(document.body.innerHTML); 
    $.fn.emailConverter = function() { this.innerHTML = emailConvert($(this).html(emailConvert($(this).html()))); } 
})(); 

});

Answer 1

innerHTML vous donne une représentation sous forme de chaîne du code HTML dans un élément. Il ne capture pas les gestionnaires d'événements attachés à ces éléments par programmation, car ceux-ci ne sont pas représentés dans le code HTML. Ne pas remplacer le innerHTML par document.body. C'est comme dire à votre secrétaire d'écrire quelque chose, et à la place, il saisit tout sur votre bureau, le lance par la fenêtre, puis griffonne la note désirée directement sur votre bureau. Même si le secrétaire dessine une image très précise de votre téléphone sur le bureau, vous ne devriez pas être surpris quand cela ne fonctionne pas. D'accord, ce n'est pas une métaphore parfaite, mais j'espère que vous obtenez ma signification. Au lieu de cela, vous devriez trouver les éléments HTML spécifiques que vous souhaitez modifier, et/ou insérer de nouveaux éléments HTML aux emplacements souhaités.

Il y a beaucoup de différentes méthodes par lesquelles vous pouvez saisir un élément existant sur la page, comme document.getElementById, document.querySelector, document.querySelectorAll et document.getElementsByTagName. Vous pouvez également explorer les nœuds enfants document.body si vous souhaitez vérifier de manière obsessionnelle tous les éléments de la page.

De même, il existe également plusieurs façons d'insérer du code HTML dans un élément HTML une fois que vous l'avez sélectionné, y compris à la fois appendChild et insertAdjacentHTML. Vous pouvez toujours manipuler le innerHTML d'un élément spécifique, mais vous devez veiller à écraser tous les nœuds enfants qu'il pourrait contenir, en particulier si ces nœuds enfants peuvent avoir des écouteurs d'événements.