Question

我遇到了解决这个问题的问题。我首先尝试将脚本标记设置为字符串，然后使用jquery replaceWith（）在页面加载后将它们添加到文档中：

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

但是我在那个var上得到了字符串文字错误。然后我尝试编码字符串，如：

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

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

有人可以告诉我你如何在页面加载后动态地将<script>标签添加到浏览器中，理想情况是通过jQuery？

Answer 1

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

示例：

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

Answer 2

尝试以下方法：

<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

Answer 3

这是使用现代（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');
});

Answer 4

更简单的方法是：

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

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

Answer 5

这个答案在技术上与jcoffland回答的相似或相同。我刚刚添加了一个查询来检测脚本是否已经存在。我需要这个，因为我在一个内部网站上工作，有几个模块，其中一些是共享脚本或自带，但这些脚本不需要每次都加载。我在生产环境中使用这个片段超过一年，它就像一个魅力。评论自己：是的我知道，问一个函数是否存在更为正确......： - ）

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

Answer 6

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

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

我没有关于它是如何工作的完整建议，但有趣的是，如果你将结束标记附加在一行中它将不起作用。

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

Answer 7

示例：

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被添加而不是被替换。

如果它不起作用，请发表评论。我想帮助你！

Answer 8

这是一个更清晰的方式 - 不需要jQuery - 它添加了一个脚本作为<body>的最后一个孩子：

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

但是如果你想添加和加载脚本，请使用Rocket Hazmat's method。

Answer 9

如果您尝试运行一些动态生成的JavaScript，那么使用eval会稍微好一些。但是，JavaScript是一种动态语言，你真的不需要它。

如果脚本是静态的，那么Rocket的getScript - 建议就可以了。

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

9 个答案: