你知道为什么下面这段代码没有将脚本元素添加到DOM中吗?
var code = "<script></script>";
$("#someElement").append(code);
你知道为什么下面这段代码没有将脚本元素添加到DOM中吗?
var code = "<script></script>";
$("#someElement").append(code);
当前回答
你不需要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,有助于防止长时间运行的脚本出现竞争条件。
其他回答
我想做同样的事情,但附加一个脚本标签在其他框架!
var url = 'library.js';
var script = window.parent.frames[1].document.createElement('script' );
script.type = 'text/javascript';
script.src = url;
$('head',window.parent.frames[1].document).append(script);
我试过这个,效果很好。只需将<符号替换为\x3C。
// With Variable
var code = "\x3Cscript>SomeCode\x3C/script>";
$("#someElement").append(code);
or
//Without Variable
$("#someElement").append("\x3Cscript>SomeCode\x3C/script>");
您可以在这里测试代码。
只需通过jQuery解析来创建一个元素。
<div id="someElement"></div>
<script>
var code = "<script>alert(123);<\/script>";
$("#someElement").append($(code));
</script>
工作示例:https://plnkr.co/edit/V2FE28Q2eBrJoJ6PUEBz
你说“不工作”是什么意思?
jQuery检测到您正在尝试创建一个SCRIPT元素,并将自动在全局上下文中运行元素的内容。你是说这对你没用吗?-
$('#someElement').append('<script>alert("WORKING");</script>');
编辑:如果你在运行命令后没有在DOM中看到SCRIPT元素(例如在Firebug中),这是因为jQuery,就像我说的,将运行代码,然后将删除SCRIPT元素-我相信SCRIPT元素总是附加到主体…但无论如何,在这种情况下,位置对代码执行完全没有影响。
这是我认为最好的解决办法。谷歌分析就是这样注入的。
var (function(){
var p="https:" == document.location.protocol ? "https://" : "http://";
d=document,
g=d.createElement('script'),
s=d.getElementsByTagName('script')[0];
g.type='text/javascript';
g.src=p+'url-to-your-script.js';
s.parentNode.insertBefore(g,s); })();