我必须使用innerHTML 将包含内联事件处理程序的html 代码字符串注入(inject)到元素中。像这样的事情:
document.getElementById('some-div')
.innerHTML = '<button onclick="alert(\'<html>\');"><html></button>';
我期望得到这个结果:
<button onclick="alert('<html>');"><html></button>';
但实际的 DOM 看起来像这样:
<button onclick="alert('<html>');"><html></button>';
为什么浏览器会自动转义内联事件处理程序部分？可以在不双重转义的情况下防止这种情况吗？
最佳答案
当您通过设置 Element.innerHTML 将 HTML 数据传递到浏览器时，浏览器必须解释/解析 HTML 才能呈现它。即使它没有专门渲染 onclick 属性，它仍然必须解析编码。正如 Chris Barr 所说，你必须重新编码字符串，以便浏览器解析它时，它会解析成正确的版本。
使用简单的 HTML 编码器，如 https://opinionatedgeek.com/codecs/htmlencoder ，您可以重新编码该字符串，它应该返回“<html>”。
关于javascript - innerHTML 自动对 HTML 字符串的部分进行转义？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55910549/