外部源提供以字符串形式編寫為 HTML 的腳本標記的內容。我需要將這些腳本標籤添加到頭部。如果我這樣做，所有腳本標籤都會添加到 DOM 的 head 標籤中，但是實際上沒有加載任何源（devtools 網絡選項卡）。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
let sLoadThis = '<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/underscore@latest/underscore-umd-min.js">'
sLoadThis = sLoadThis + "<" + "/script>"
let oScript = $(sLoadThis).get(0);
document.head.appendChild(oScript);
</script>
</body>
</html>
如果我使用 jQuery 作為解釋器，然後使用 vanilla JS 插入腳本標籤，它會起作用：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
let sLoadThis = '<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/underscore@latest/underscore-umd-min.js">'
sLoadThis = sLoadThis + "<" + "/script>"
let oScript = $(sLoadThis).get(0);
var vanillaScript = document.createElement('script')
vanillaScript .type = 'text/javascript'
vanillaScript .src = oScript.src
document.head.appendChild(vanillaScript )
</script>
</body>
</html>
我想了解為什麼它在我的第一個示例中不起作用。
第二個示例運行是因為您使用的是 dom 節點。這就是appendChild()工作原理。jQueryget()方法適用於現有的 dom 元素。你唯一擁有的是一個字符串，它還不存在於你的 dom 中。請嘗試以下操作。
let script = $.parseHtml(sLoadThis);
console.log(script.get(0)); // should be a script dom node element
document.head.appendChild(script.get(0));
在vanilla JavaScript 中，它比 jQuery 更容易、更快，因為您不必使用依賴項。
const fragment = document.createRange().createContextualFragment(htmlStr);
document.head.appendChild(fragment);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句