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

问题描述

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

document.addEventListener('contextmenu', function (e) {e.preventDefault();尝试 {document.getElementById('menu').remove();}赶上(x){//}var newHtmlText = "
";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'>重新加载</div><div class='clear'></div>
";newHtmlText += "
";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>

";newHtmlText += "</div>";document.body.innerHTML += newHtmlText;var menu = document.getElementById('menu');menu.style.left = (e.clientX) + "px";menu.style.top = (e.clientY) + "px";});

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

解决方案

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

这意味着您正在用新文档完全覆盖旧文档 - 它可能在视觉上看起来相同，但在幕后，您只是对所有内容的每一个引用都进行了核对.

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

如果有任何事件侦听器绑定到文档中的元素，这些事件侦听器也会消失，因为这些元素被核爆并替换为外观相同的元素.

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

var menu = document.createElement('div');menu.id = '菜单';menu.innerHTML = "你的菜单 HTML 在这里";document.body.appendChild(menu);

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

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";
});

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

解决方案

Using x.innerHTML += y is equivalent to 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.

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屋！