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

IT技术 javascript jquery script-tag javascript-injection
2021-02-09 12:29:11

我在让它工作时遇到问题。我首先尝试将我的脚本标签设置为字符串,然后在页面加载后使用 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?

6个回答

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

例子:

$.getScript("test.js", function(){
    alert("Running test.js");
});
但是$.getScript()脚本需要在同一个域上,或者远程域和浏览器都需要支持CORS.
2021-03-25 12:29:11
$.getScript将通过 AJAX 加载一个 .js 文件并执行它。该脚本无需位于 DOM 中即可访问页面上的 div。
2021-03-27 12:29:11
@hippietrail 这实际上不是真的。它只是插入一个普通的 ol' 脚本标签,不需要 CORS 或同域。例如,我使用它来缩短加载 Google Analytics 的代码,它加载得很好。实际上,在幕后运行的实际 jquery 代码与 GA 代码段非常相似。
2021-03-27 12:29:11
谢谢,但这会坚持到 DOM 吗?我意识到我遗漏了重要信息,即我需要将脚本标签插入到 DOM 中,进行评估,此时它会返回第 3 方广告代码以在我们网站的特定 <div> 中显示。
2021-04-04 12:29:11
由于@hippietrail 的答案将以其 4 个赞成票吸引最多的关注,因此应该明确指出他是不正确的。正如 jQuery 文档在其$.ajax注释中强调的那样:“脚本和 JSONP 请求不受同源策略限制。” 来源换句话说,$.getScript可以从其他域中提取 .js 文件,而不仅仅是您自己的.
2021-04-08 12:29:11

请尝试以下操作:

<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

@Reddy 很棒的评论。这是 2010 年 10 月发布的,我确信现在这种方法不再是有效/推荐的方法,用户必须自行决定继续。
2021-03-12 12:29:11
如果使用 AJAX 加载包含此代码的页面,浏览器将抛出“主线程上的同步 XMLHttpRequest 已弃用,因为它对最终用户的体验有不利影响”警告。
2021-04-08 12:29:11
+1 用于append添加脚本。追加甚至导致内联脚本立即评估(正是我需要的)。谢谢
2021-04-09 12:29:11
使用这种方法,我最终在 IE8/9 中遇到了很多问题。即堆栈溢出错误。我使用下面的 $.getScript() 方法来全面完成这项工作。
2021-04-10 12:29:11
是的 @jcoffland 这是 2010 年 10 月写的 :)
2021-04-10 12:29:11

这是使用现代(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');
});
或者代替 .text('some script here') 你可以写 .attr('src', 'path_to_your_js_file')
2021-03-15 12:29:11
非常感谢@jcoffland 这个语法对我很有用。
2021-03-24 12:29:11

更简单的方法是:

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

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

您可能希望避免将字符串</script>放入源中,因为它可能会导致解析问题:stackoverflow.com/questions/236073/...
2021-04-02 12:29:11
逃离最后一个/对我有用:$('head').append('<script src="your.js"><\/script>');
2021-04-09 12:29:11

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

if (!$('head > script[src="js/jquery.searchable.min.js"]').length) {
    $('head').append($('<script />').attr('src','js/jquery.searchable.min.js'));
}
顺便提一句。我对样式表也这样做: if (!$('head > link[href="widgets/css/widgets.css"]').length) {$('head').append($('<link / >').attr('rel','stylesheet').attr('href','widgets/css/widgets.css'));}
2021-03-19 12:29:11