Question

我很难将脚本动态加载到DOM上。

function addScript(fileName) {
  document.body.innerHTML += `<script src='components/${fileName}/${fileName}.js'></script>`
}

addScript('message-interface')

这是我想添加脚本的方式，因为它易于编写和阅读。不幸的是，虽然脚本元素被添加到DOM，但是没有加载.js文件。

或者，我已经像这样使用了appendChild。。。

function addScript() {
  let script = document.createElement('script')
  script.src ='components/message-interface/message-interface.js'
  document.body.appendChild(script)
}
addScript()

这会成功将我的脚本加载到DOM上。

我已多次检查过，加载到DOM上的脚本元素与两段代码相同，只有使用innerHTML才会在追加子进程时将脚本加载到内存中。

为什么两个结果都会将DOM元素添加到我的body标签中，但只有其中一个允许加载.js文件？！

谢谢！

Answer 1

简单地说，因为规范是这样说的：

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0

使用innerHTML插入的
脚本元素在插入时不会执行。

还值得检查https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

的安全注意事项

加载脚本：innerHTML与appendChild

1 个答案: