javascript - document.body.innerHTML 问题

Question

我在一个网站上有一个电子邮件转换器，它是由另一个开发人员编写的，它获取一个人的用户名并将其格式化为电子邮件地址。如果您在页面上键入 [[username]]，它将在网页上生成一个可点击的电子邮件地址: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()))); }
})();

});

Answer 1

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

不要覆盖 document.body 的 innerHTML。这就像告诉你的秘书写下一些东西，她/他却抓起你 table 上的所有东西，把它扔出窗外，然后直接在你的桌面上潦草地写下想要的笔记。即使秘书在 table 上画了一张非常准确的手机图片，当它不起作用时您也不应感到惊讶。

好吧，这不是一个完美的比喻，但希望你明白我的意思。

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

有许多不同的方法可以用来获取页面上的现有元素，例如 document.getElementById、document.querySelector、document。 querySelectorAll 和 document.getElementsByTagName。如果您想强制检查页面上的所有元素，您还可以深入到 document.body 的子节点。

同样，也有多种方法可以在您选择 HTML 元素后将 HTML 插入到 HTML 元素中，包括 appendChild 和 insertAdjacentHTML。您仍然可以操作特定元素的 innerHTML，但您应该小心覆盖它可能包含的任何子节点，尤其是当这些子节点可能具有事件监听器时。