如何在页面加载后通过 jQuery 动态插入 < script > 标记？

我不知道怎么让这个起作用。我首先尝试将脚本标记设置为字符串，然后使用 jquery replaceWith ()在页面加载后将它们添加到文档中:

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

但是我在这个变量上得到了字符串文字错误，然后我试着编码这个字符串，比如:

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

但是发送到 replaceWith()输出只是该字符串到浏览器。

Can someone please let me know how you would go about dynamically adding a <script> tag into the browser after page load, ideally via jQuery?

260919 次浏览
小开

您可以将脚本放到一个单独的文件中，然后使用 $.getScript加载并运行它。

例如:

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

如果您试图运行一些动态生成的 JavaScript，那么使用 eval会稍微好一点。然而，JavaScript 是如此动态的语言，您实际上不应该需要它。

如果脚本是静态的，那么火箭的 getScript建议是正确的选择。

小开

试试以下方法:

<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

小开

有一种解决方法听起来更像是黑客行为，我同意这不是最优雅的方法，但是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);
}
});

只是不要问我为什么: ——这是我在绝望的、几乎是随机的试验中得出的结论之一，而且失败了。

我没有完整的建议如何工作，但有趣的是，它不会工作，如果你追加结束标签在一行。

在这种时候，我觉得我已经成功地除以零了。

小开

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

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

或者，如果你真的想替换一个 div，你可以这样做:

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

更简单的方法是:

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

您也可以使用此表单来加载 css。

小开

例如:

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 而不是替换它。

如果不行请留言，我很乐意帮助你！

小开

这个答案在技术上与 Joffland 的答案相似或相等。 我只是添加了一个查询来检测脚本是否已经存在。 I need this because I work in an intranet website with a couple of modules, of which some are sharing scripts or bring their own, but these scripts do not need to be loaded everytime again. I am using this snippet since more than a year in production environment, it works like a charme. Commenting to myself: Yes I know, it would be more correct to ask if a function exists... :-)

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

这里有一个更清晰的方法，不需要 jQuery & mash; ，它添加一个脚本作为 <body>的最后一个子节点:

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

But if you want to 加 and 装弹 scripts use 火箭危险品处理小组的方法.


提交答案