当我使用document.body.innerHTML + = newHtmlText时，页内JavaScript停止 [英] In-page JavaScript stops when I use document.body.innerHTML += newHtmlText

问题描述

有人知道为什么您使用document.body.innerHTML += "content";页面上的JavaScript会停止工作吗?我有以下代码:

Does anyone know why if you use document.body.innerHTML += "content"; the JavaScript on the page stops working? I have the following code:

document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
    try {
        document.getElementById('menu').remove();
    } catch (x) {
        //
    }
    var newHtmlText = "<div id='menu'>";
    newHtmlText += "<div class='menu-item' id='menu-back' onclick='window.history.back();'>" +
        "<div class='fa fa-arrow-left icon'></div><div class='text'>Back</div><div class='clear'></div></div>";
    newHtmlText += "<div class='menu-item' id='menu-forward' onclick='window.history.forward();'>" +
        "<div class='fa fa-arrow-right icon'></div><div class='text'>Forward</div><div class='clear'></div></div>";
    newHtmlText += "<div class='menu-item' id='menu-reload' onclick='location.reload();'>" +
        "<div class='fa fa-repeat icon'></div><div class='text'>Reload</div><div class='clear'></div></div>";
    newHtmlText += "<hr />";
    newHtmlText += "<div class='menu-item' id='menu-home' onclick='location.href = \"/\";'>" +
        "<div class='fa fa-home icon'></div><div class='text'>Home</div><div class='clear'></div></div>";
    newHtmlText += "</div>";
    document.body.innerHTML += newHtmlText;
    var menu = document.getElementById('menu');
    menu.style.left = (e.clientX) + "px";
    menu.style.top = (e.clientY) + "px";
});

每次打开上下文菜单时，JavaScript都会停止工作.这不是它唯一的一次.

Every time I open the context menu the JavaScript stopped working. This is not the only time it has done this.

推荐答案

使用x.innerHTML += y等同于x.innerHTML = x.innerHTML + y;

这意味着您将用新文档完全覆盖旧文档-外观可能看起来相同，但是在引擎盖下，您只是忽略了对所有内容的每个引用.

This means that you are completely overwriting the old document with a new document - it may appear visually the same, but under the hood you've just nuked every single reference to everything.

如果页面中其他地方的一些JavaScript使用了var container = document.getElementById('container');之类的东西，为了保存引用，那么该引用现在就消失了.

If a bit of JavaScript elsewhere in the page used something like var container = document.getElementById('container');, in order to save a reference, well that reference is now gone.

如果文档中的元素绑定了任何事件侦听器，则这些监听器也将消失，因为元素已被替换并替换为外观相同的元素.

If there are any event listeners bound to elements in the document, those are gone too because the elements were nuked and replaced with identical-looking ones.

如果要将上下文菜单添加到页面，则应执行以下操作:

If you want to add your context menu to the page, you should do something like:

var menu = document.createElement('div');
menu.id = 'menu';
menu.innerHTML = "Your menu HTML here";
document.body.appendChild(menu);

这会将新元素添加到页面中，而不会破坏整个内容.

This will add the new element to the page without nuking the whole thing.

这篇关于当我使用document.body.innerHTML + = newHtmlText时，页内JavaScript停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！