如何在页面加载后通过jQuerydynamic插入<script>标签?

我有问题得到这个工作。 我第一次尝试设置我的脚本标记为string,然后使用jquery replaceWith()将它们添加到页面加载后的文档:

var a = '<script type="text/javascript">some script here</script>'; $('#someelement').replaceWith(a); 

但是我得到了该string字面错误。 然后我尝试编码string,如:

 var a = '&left;script type="text/javascript"&gt;some script here&lt;\/script&gt;'; 

但发送到replaceWith()只输出该string到浏览器。

有人能让我知道你将如何去dynamic添加一个<script>标签到页面加载后,最好通过jQuery?

您可以将脚本放入单独的文件,然后使用$.getScript加载并运行它。

例:

 $.getScript("test.js", function(){ alert("Running test.js"); }); 

尝试以下操作:

 <script type="text/javascript"> // Use any event to append the code $(document).ready(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.src = "http://scriptlocation/das.js"; // Use any selector $("head").append(s); }); 

http://api.jquery.com/append

下面是使用现代(2014)JQuery的正确方法:

 $(function () { $('<script>') .attr('type', 'text/javascript') .text('some script here') .appendTo('head'); }) 

或者如果你真的想replace一个div你可以做:

 $(function () { $('<script>') .attr('type', 'text/javascript') .text('some script here') .replaceAll('#someelement'); }); 

更简单的方法是:

 $('head').append('<script type="text/javascript" src="your.js"></script>'); 

你也可以使用这个表单来加载css。

这个答案在技术上与jcoffland的回答类似或相同。 我刚刚添加了一个查询来检测脚本是否已经存在。 我需要这个,因为我在一个Intranet网站上工作了几个模块,其中一些模块共享脚本或自带,但是这些脚本不需要每次都加载。 我在生产环境中使用这段代码已经有一年多的时间了,它就像一个魅力一样。 对自己说:是的,我知道,问一个函数是否存在会更正确::-)

 if (!$('head > script[src="js/jquery.searchable.min.js"]').length) { $('head').append($('<script />').attr('src','js/jquery.searchable.min.js')); } 

例:

 var a = '<script type="text/javascript">some script here</script>'; $('#someelement').replaceWith(a); 

它应该工作。 我试了一下 相同的结果。 但是当我使用这个:

 var length = 1; var html = ""; for (var i = 0; i < length; i++) { html += '<div id="codeSnippet"></div>'; html += '<script type="text/javascript">'; html += 'your script here'; html += '</script>'; } $('#someElement').replaceWith(a); 

这对我有效。

编辑:我忘了#someelement (顺便说一句,我可能想使用#someElement因为约定)

这里最重要的是+ =,所以html被添加并且不被replace。

如果不起作用,请发表评论。 我想帮你!

有一个解决方法,听起来更像是一个黑客攻击,我同意这不是最优雅的方式,但100%的作品:

说你的AJAX响应是类似的

 <b>some html</b> <script>alert("and some javscript") 

请注意,我已经跳过结束标签的目的。 然后在加载上面的脚本中,执行以下操作:

 $.ajax({ url: "path/to/return/the-above-js+html.php", success: function(newhtml){ newhtml += "<"; newhtml += "/script>"; $("head").append(newhtml); } }); 

只是不要问我为什么:-)这是由于绝望的几乎随机试验而失败的结果之一。

关于它是如何工作的,我还没有完整的build议,但有趣的是,如果将结束标记追加到一行中,它将不起作用。

在这样的时代,我觉得我已经成功地被零分了。

这里有一个更清晰的方法 – 不需要jQuery,它将脚本添加为<body>的最后一个子<body>

 document.body.innerHTML +='<script src="mycdn.js"><\/script>' 

但是如果你想添加加载脚本使用Rocket Hazmat的方法 。

如果您正在尝试运行一些dynamic生成的JavaScript,那么使用eval会稍微好一些。 但是,JavaScript是一种dynamic的语言,你真的不需要这样做。

如果脚本是静态的,那么Rocket的getScript -suggestion就是要走的路。