通过Javascript将Javascript代码插入HTML

Question

我试图通过Javascript将Javascript代码插入HTML。

将此代码插入HTML不起作用，代码不会执行：

<script>

function callAlert(){
alert('test');
}

</script>

执行此代码：

<img src="xxx" onerror="alert('test')">

这不会调用该函数，因此不会执行警报：

<img src="xxx" onerror="callAlert();">

为什么执行了错误警报并且没有执行错误调用函数？

Answer 1

您无法再使用<script>插入el.innerHTML代码。这是一个最近才添加的安全问题。

转到此页面： https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

并向下滚动到安全注意事项部分。

它提到你不能添加<script>标签，但它不是万无一失的。您描述的内容仍然可以导致脚本运行：

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

如果您确实需要从现有JavaScript添加新JavaScript，则需要执行以下操作：

＆＃13;

＆＃13;

var s = document.createElement('script');
s.textContent = 'function callAlert(){alert(\'test\');}';
document.head.appendChild(s);
callAlert();

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试将脚本放入页面的头部，可能是函数在它被定义之前执行。

如果这不起作用，请告诉您控制台返回的错误。