jQuery附加到vanilla javascript问题时，在dom中注入facebook像素

Question

我写了一个脚本，我在我的登录页面的头部部分。它的作用是加载一个 facebook 像素，我将其存储在应用程序的另一部分，我通过调用端点来访问该部分。这是因为我需要动态更改脚本而不会干扰登录页面本身的代码。这段代码是用Jquery编写的，但现在我需要jQuery从我的应用程序中消失，所以我试图只使用vanilla javascript重写它。

问题是它与jQuery代码一起工作得很好，但是当我尝试用vanilla Javascript替换它时，它似乎没有以正确的方式注入代码。DOM 中的输出看起来完全相同，但它不会以某种方式触发像素。

所以我的问题是。这是为什么呢？

这是我的jQuery脚本的工作示例

<script>
$.get('https://api.mydomain.com/script', function (data) {
$('head').append(data);
});
</script>

这是我的原版Javascript版本

<script>
var theUrl = 'https://api.mydomain.com/script';
let xhr = new XMLHttpRequest();
xhr.open("GET", theUrl);
xhr.send();
xhr.onload = function() {
document.querySelector("head").insertAdjacentHTML("beforeend", xhr.response);
};
</script>

Answer 1

我认为问题出在insertAdjacentHTML上 - 只是一个猜测，但也许它仅适用于 HTML(div、图像等(而不是脚本。希望此解决方法是可接受的解决方案：

(function() {
const
exampleScript = getScriptContent(`
<script>
alert("example script loaded");
</script>
`),
s = document.createElement("script"),
t = document.createTextNode(exampleScript);
s.appendChild(t);
document.getElementsByTagName("head")[0].appendChild(s);
function getScriptContent(htmlStr) {
const tempDiv = document.createElement("div");
tempDiv.innerHTML = htmlStr;
return tempDiv.innerText;
}
})();