你知道为什么下面这段代码没有将脚本元素添加到DOM中吗?
var code = "<script></script>";
$("#someElement").append(code);
你知道为什么下面这段代码没有将脚本元素添加到DOM中吗?
var code = "<script></script>";
$("#someElement").append(code);
当前回答
在脚本文件中添加sourceURL会有帮助,如本页所述: https://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/
在脚本文件中,添加一个带有sourceURL的语句,如"//@ sourceURL=foo.js" 使用jQuery $.getScript()加载脚本,脚本将在chrome开发工具的“sources”选项卡中可用
其他回答
将脚本追加到正文:
$(document).ready(function() {
$("<script>", { src : "bootstrap.min.js", type : "text/javascript" }).appendTo("body");
});
你不需要jQuery来创建一个Script DOM元素。它可以用香草ES6这样做:
const script = "console.log('Did it work?')"
new Promise((resolve, reject) => {
(function(i,s,o,g,r,a,m){
a=s.createElement(o),m=s.getElementsByTagName(o)[0];
a.innerText=g;
a.onload=r;m.parentNode.insertBefore(a,m)}
)(window,document,'script',script, resolve())
}).then(() => console.log('Sure did!'))
它不需要包装在Promise中,但是这样做允许您在脚本加载时解析Promise,有助于防止长时间运行的脚本出现竞争条件。
如此:
$('body').append($("<script>alert('Hi!');<\/script>")[0]);
jQuery似乎在脚本上做了一些聪明的事情,所以你需要附加html元素而不是jQuery对象。
我试过这个,效果很好。只需将<符号替换为\x3C。
// With Variable
var code = "\x3Cscript>SomeCode\x3C/script>";
$("#someElement").append(code);
or
//Without Variable
$("#someElement").append("\x3Cscript>SomeCode\x3C/script>");
您可以在这里测试代码。
我写了一个npm包,它可以让你在执行脚本时将HTML字符串(包括脚本标签)附加到容器中
例子:
import appendHtml from 'appendhtml';
const html = '<p>Hello</p><script src="some_js_file.js"></script>';
const container = document.getElementById('some-div');
await appendHtml(html, container);
// appendHtml returns a Promise, some_js_file.js is now loaded and executed (note the await)
在这里找到它:https://www.npmjs.com/package/appendhtml