Question

我在一个网站上有一个电子邮件转换器，由另一个开发人员编写，它接收一个人的用户名并将其格式化为电子邮件地址。如果您在页面[[用户名]]上键入，它将在网页上生成可点击的电子邮件地址：username@gmail.com

现在我正在尝试将PayPal的跳过功能合并到网站的辅助功能导航中。在我为Pay Pal添加代码后，当我按Tab键时，＆＃34;跳到＆＃34;链接显示在左上角，但链接不起作用。这意味着下拉菜单不会出现。 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()))); }
})();

}）;

Answer 1

innerHTML为您提供元素中HTML的字符串表示。它没有捕获以编程方式附加到这些元素的事件处理程序，因为它们没有在HTML中表示。

请勿覆盖innerHTML的{{1}}。这就像告诉你的秘书写下来的东西，他/她反而抓住你桌面上的所有东西，把它扔出窗外，然后直接在桌面上潦草地写下所需的笔记。即使秘书在桌面上绘制出非常精确的手机照片，但如果它无法正常工作，也不应该感到惊讶。

好吧，不是一个完美的比喻，但希望你能理解我的意思。

相反，您应该找到要修改的特定HTML元素，和/或在所需位置插入新的HTML元素。

有许多不同的方法可以抓取页面上的现有元素，例如document.body，document.getElementById，document.querySelector和document.querySelectorAll。如果您想要痴迷地检查页面上的所有元素，您还可以深入查看document.getElementsByTagName的子节点。

同样，在您选择HTML元素后，还有多种方法可以将HTML插入HTML元素，包括document.body和appendChild。您仍然可以操作特定元素的insertAdjacentHTML，但是您应该小心覆盖它可能包含的任何子节点，特别是如果这些子节点可能有事件侦听器。

document.body.innerHTML问题

1 个答案: