javascript - 使用 DOMParser 解析的脚本不执行

标签 javascript dom

当我使用 document.createElement 创建脚本元素时并将其附加到 document.head , JavaScript 执行成功:

var el = document.createElement('script');
el.text = "console.log('Hello World!')";
document.head.insertAdjacentElement('afterbegin', el);
// console output: "Hello World!"

但是如果我使用 DOMParser 来解析一个 html 字符串然后附加它的 firstElementChilddocument.head ,JavaScript 不执行:

var parser = new DOMParser();
var htmlString = "<script>console.log('Bye World!')<\/script>";
var domEl = parser.parseFromString(htmlString, "text/xml").firstElementChild;
document.head.insertAdjacentElement('afterbegin', domEl);
// No console output

A <script>标签添加到 document.head在这两种情况下。为什么第二种情况JavaScript不执行?

最佳答案

因为 DOMParser 标记了 script 元素,所以它不会运行,因为 DOMParser 解析 text/xml(和其他) 禁用脚本 ( spec )。脚本是否应该运行是与 script 元素关联的一条状态信息,这就是为什么这不会运行脚本两次:

var el = document.createElement('script');
el.text = "console.log('Hello World!')";
document.head.insertAdjacentElement('afterbegin', el);
document.head.removeChild(el);
document.head.appendChild(el);

关于javascript - 使用 DOMParser 解析的脚本不执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52779233/

相关文章:

javascript - 使用 javascript/jQuery 访问具有使用 angular js 动态生成的 ids/属性的 html 元素

java - DOM 解析器错误的 childNodes 计数

javascript - 在 JQuery 中使用类选择相同的元素

javascript - 超出最大调用堆栈大小错误...我该如何修复?

javascript - 异步setState在componentDidMount中不起作用,但在其他地方起作用: React Native

javascript - jquery DOM 函数返回未定义但 javascript 版本有效

javascript - `document.write` 和 DOM API 在阻止后续请求方面没有区别 - 为什么?

javascript - 将 Javascript DOM 值传递给内部 HTML

javascript - 替换 true 时合并 ngClass 属性

javascript - Laravel:在 javascript 中使用 url 代替路由