通过查找'id'将数据插入关系

我正在尝试使用fetch API获取HTML片段，然后将其添加到HTML页面中。虽然这适用于 HTML 内容，但我注意到，如果我在片段中放置一个 <script> 标签，标签不会被剥离，但它也不会执行。

下面是一个示例。我希望alert会触发，但即使脚本标签出现在页面上，它也没有。

我的问题是(1(为什么<script>没有得到评估，(2(有没有办法让它进行评估？

索引.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Index</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

片段.html

<h1>Hello</h1>
<p>It works</p>
<script>
  alert('hello') // doesn't work, but script still appears on page
</script>

主.js

fetch('fragment.html').then((res)=>{
  return res.text()
}).then((data)=>{
  var div = document.createElement('div')
  div.innerHTML = data
  document.body.appendChild(div)
})

因为这是 HTML 规范规定的：

使用 innerHTML 插入的脚本元素在插入。

我在这里做假设，但它可能是为了引入一层安全性，这样你就不会意外地引入 XSS 或代码注入。

如果要运行脚本，请获取其内容，创建特定的<script>元素，将脚本的正文设置为内容，然后将其插入到 DOM 中：

const script = document.createElement("script"),
  text = document.createTextNode("console.log('foo')");
script.appendChild(text);
document.body.appendChild(script);

索引.html

片段.html

主.js

相关内容

最新更新

热门标签：