如何在运行时将 javascript 代码加载到 html 文件？答案

【问题标题】：How to load javascript code to an html file at runtime?如何在运行时将 javascript 代码加载到 html 文件？
【发布时间】：2021-12-28 23:06:54
【问题描述】：

让我问一下是否可以在运行时将 javascript 代码加载到 html 文件中。例如，放置一个文本框来输入脚本文件的位置，并放置一个表单按钮来触发加载脚本文件。

提前谢谢你。

【问题讨论】：

标签： javascript

【解决方案1】：

将其粘贴到该按钮的 onclick 中（更正第 3 行中的 url）：

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "url to the script file here");
document.getElementsByTagName("head")[0].appendChild(script);

该脚本将在第 4 行执行后立即开始下载，一旦下载，它将立即执行或可用。

【讨论】：

确保有head元素。如果没有，添加到 body 也可以。顺便说一句，+1 用于坚持纯 JavaScript，因为问题没有用 jQuery 标记。
如果我用这个方法添加两个脚本会怎样？他们会同时开始下载，还是第二个将等待第一个？
这很好用。另一方面，如果你想用 Java Script 设置 .innerHTML 函数，而不是将 'src' 属性设置为指向一个文件，它会延长 HTML 页面的长度，所以要对抗这种使用： “script.setAttribute('隐藏', 'true');”摆脱对 HTMl 文档增加的长度。
根据 HTML5 规范，type="text/javascript" 属性为 not necessary。

【解决方案2】：

是的，jQuery getScript method 让这变得微不足道：

//on button click event:
$.getScript(urlOfScript);

或者仅使用原生 javascript 方法：

//on button click event:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'urlOfScript';
head.appendChild(script);

【讨论】：

【解决方案3】：

以上所有好的答案。您还可以通过 ajax 将 js 加载为任何其他 html 片段。简短的例子：

start.html

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <a href="#" onclick="$('#result').load('start.js'); return false;">start</a>
    <div id="result"></div>
</body>
</html>

start.js

<script type="text/javascript">
    alert('Hello world!');
</script>

ajax 不需要 jquery - 我只是将它用作概念的快速证明。

【讨论】：

【解决方案4】：

这里也有一个jquery方法来实现。

let src = 'http://www.example.com/dosome/afsddfa';
$('<script>').attr(
{
   src: src,
   type: 'text/javascript'
}).appendTo('body');

它将创建一个脚本元素并将其附加到正文。

您也可以使用.appendTo('head')。

【讨论】：

【解决方案5】：

1 班轮（仅供好奇）：

with(document)
with(body)
    with(insertBefore(createElement("script"),firstChild))
        setAttribute("src","//g.alicdn.com/...aplus_v2.js")

//or with additional attributes
with(document)
with(body)
    with(insertBefore(createElement("script"),firstChild))
        setAttribute(
            "exparams","category=...at_bu=cbu",
            id="beacon-aplus",
            src="//g.alicdn.com/...aplus_v2.js")

【讨论】：