Блог

У меня есть конвертер электронной почты на веб-сайте, написанный другим разработчиком, который принимает имя пользователя пользователя и форматирует его в адрес электронной почты. Если вы введете на странице [[имя пользователя]], на веб-странице будет сгенерирован интерактивный адрес электронной почты: username@gmail.com

Теперь я пытаюсь включить навигацию PayPal по переходу к доступности на веб-сайт. После добавления кода для Pay Pal, когда я нажимаю tab, в левом верхнем углу появляется ссылка «Перейти к», но ссылка не работает. Это означает, что выпадающее меню не появится. https://github.com/paypal/skipto

В моем конвертере электронной почты javascript есть строка кода

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

Похоже, это проблема, потому что код Paypal также использует innerHTML в своем коде. Я ищу решение для этой конкретной строки кода или всего кода

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

Я пробовал различные решения безрезультатно. Любая помощь была бы отличной. Вот код:

  $(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()))); }
})();
  

});

innerHTML предоставляет вам строковое представление HTML-кода внутри элемента. Он не фиксирует обработчики событий, которые были прикреплены к этим элементам программно, поскольку они не представлены в HTML.

Не перезаписывайте innerHTML of document.body . Это все равно что сказать вашему секретарю что-то записать, а он / она вместо этого хватает все, что есть на вашем столе, выбрасывает это в окно, а затем нацарапывает нужную заметку прямо на вашем рабочем столе. Даже если секретарь очень точно изобразит ваш телефон на столе, вы не должны удивляться, когда он не работает.

Ладно, не идеальная метафора, но, надеюсь, вы понимаете, что я имею в виду.

Вместо этого вам следует найти конкретные HTML-элементы, которые вы хотите изменить, и / или вставить новые HTML-элементы в нужные места.

Существует множество различных методов, с помощью которых вы можете захватить существующий элемент на странице, таких как document.getElementById , document.querySelector , document.querySelectorAll и document.getElementsByTagName . Вы также можете перейти к дочерним узлам document.body , если хотите навязчиво проверять все элементы на странице.

Аналогично, существует также несколько способов вставить HTML в HTML-элемент после его выбора, включая оба appendChild и insertAdjacentHTML . Вы все еще можете манипулировать innerHTML определенным элементом, но вам следует быть осторожным при перезаписи любых дочерних узлов, которые он может содержать, особенно если у этих дочерних узлов могут быть прослушиватели событий.