无法重构JavaScript中包含innerHTML的内联脚本

2024-05-21 • 问答

我目前在JavaScript中具有以下代码：

container.innerHTML = `
            <h3 id="box-title"> Build Analysis
             </u><span id="close" class="close" 
            onclick=parentNode.parentNode.style.display='none';>x</span></h3>
             .... /* skipping the rest because it is irrelevant */

这只是用于在网页中动态插入HTML内容的代码（在本例中为可以打开和关闭的框）。我的问题是关于内联脚本的。目前，它可以与onclick（关闭窗口）一起使用，但是它使用内联脚本，这是不好的。

我尝试了以下链接的解决方案：（具有重构内联脚本的部分） https://csp.withgoogle.com/docs/adopting-csp.html

我从那里尝试了以下解决方案，但没有任何反应：在大多数情况下，更改将很简单。要重构事件处理程序，请重写它们以从JavaScript块添加：

从那里复制：

<script> function doThings() { ... } </script>
<span onclick="doThings();">A thing.</span>

应成为：

<span id="things">A thing.</span>

<script nonce="${nonce}">
document.addEventListener('DOMContentLoaded',function () {
  document.getElementById('things')
          .addEventListener('click',function doThings() { ... });
});
</script>

但是当将其应用到我的项目中时，它似乎不起作用：

 ...
 </u><span id="close" class="close">x</span></h3>
...

<script>
                document.addEventListener('DOMContentLoaded',function () {
                document.getElementById('close')
                        .addEventListener('click',function closeBox() {
                            parentNode.parentNode.style.display='none';
                        });
                });
    </script>

我还尝试在标签中放置onclick=CloseBox()。它只是没有注册此功能，什么也没有发生。甚至不会发生错误。谁能帮忙吗？谢谢！

之所以不起作用，是因为当您在HTML中分配了script的{{1}}标签时，该脚本不会由浏览器运行。

相反，您应该将代码添加到将其分配给innerHTML的代码中：

innerHTML

还要注意，您需要在第一个container.innerHTML = ` <h3 id="box-title"> <u>Build Analysis </u><span id="close" class="close">x</span></h3> ....`; document.getElementById('close') .addEventListener('click',function closeBox() { this.parentNode.parentNode.style.display='none'; });（上面添加）和this.元素的开始标记（上面添加）之前parentNode。

实时示例：

var container = document.getElementById("container");
container.innerHTML = `
    <h3 id="box-title"><u> Build Analysis
     </u><span id="close" class="close">x</span></h3>
     ....`;
document.getElementById('close')
    .addEventListener('click',function closeBox() {
        this.parentNode.parentNode.style.display='none';
    });

如果脚本标签已经位于要分配的字符串中（例如，因为您是从其他地方获取的字符串，而不是问题所在的实际代码中），您可以在事后获取脚本内容并运行它。在<div id="container"></div>分配之后：

innerHTML

（对于较旧的浏览器，您可能需要填充container.querySelectorAll("script").forEach(function(script) { var newScript = document.createElement("script"); newScript.textContent = script.textContent; document.body.appendChild(newScript); // runs it... document.body.removeChild(newScript); // ...after which the `script` element is unnecessary });，有关方法请参见my answer here。）

实时示例：

NodeList.prototype.forEach

var container = document.getElementById("container");
container.innerHTML = `
    <h3 id="box-title"><u> Build Analysis
     </u><span id="close" class="close">x</span></h3>
     <script>
     document.getElementById('close')
         .addEventListener('click',function closeBox() {
             this.parentNode.parentNode.style.display='none';
         });
     <\/script>
     ....`;
 container.querySelectorAll("script").forEach(function(script) {
     var newScript = document.createElement("script");
     newScript.textContent = script.textContent;
     document.body.appendChild(newScript); // runs it...
     document.body.removeChild(newScript); // ...after which the `script` element is unnecessary
 });

侧面说明：通过使用closest，可以使函数中的代码更健壮：

<div id="container"></div>

无法重构JavaScript中包含innerHTML的内联脚本

w75752 回答：无法重构JavaScript中包含innerHTML的内联脚本

大家都在问