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

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

预先感谢您。

2012-01-27 seven_swodniw

该按钮的onclick内粘贴此（校正第三行中的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行执行后，一旦它被下载，它将执行或以其他方式可用。

来源

2012-01-27 17:00:01

确保有一个头元素。如果不是的话，也可以添加到身体作品。顺便说一句，坚持纯JavaScript的+1，因为问题没有用jQuery标记。 – 2012-01-27 17:03:14

如果我用这种方法添加两个脚本怎么办？他们会同时开始下载还是等待第一个？ – 2014-11-05 21:40:58

是的，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);

来源

2012-01-27 16:59:32

以上所有的好答案。您也可以通过ajax像任何其他html片段一样加载js。简单的例子：

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>

你不需要阿贾克斯jQuery的 - 我只是用它的概念一样快的证明。

来源

2012-01-27 17:07:09 DamirR

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

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

它将创建一个脚本元素并将其附加到主体。您可以使用.appendTo('head')。

来源

2017-09-18 03:21:28

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

回答

相关问题