如何动态加载 javascript 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5235321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I load a javascript file dynamically?
提问by user455318
I have this code:
我有这个代码：
<script type="text/javascript">
function js() {
var getJs = document.getElementById("jogo");
if (JS == true) { //if button JS is pressed - it is correct?
< script type = "text/javascript"
src = "file1.js" >
} else < script type = "text/javascript"
src = "file2.js" >
</script>
}
</script>
it doesn't work. I gave two buttons, if the first is pressed, file1.jsshould be loaded. In case the second one is pressed, file2.jsshould be loaded.
它不起作用。我给了两个按钮，如果第一个被按下，file1.js应该是加载的。如果按下第二个，file2.js则应加载。
How can I do that?
我怎样才能做到这一点？
回答by Lekensteyn
You cannot embed HTML in Javascript in that way. Basically, what you want is to embed a script element, pointing to a certain javascript file when clicking a button. That can be done with combining events with DOM:
您不能以这种方式在 Javascript 中嵌入 HTML。基本上，您想要的是嵌入一个脚本元素，在单击按钮时指向某个 javascript 文件。这可以通过将事件与 DOM 结合来完成：
<script type="application/javascript">
function loadJS(file) {
// DOM: Create the script element
var jsElm = document.createElement("script");
// set the type attribute
jsElm.type = "application/javascript";
// make the script element load file
jsElm.src = file;
// finally insert the element to the body element in order to load the script
document.body.appendChild(jsElm);
}
</script>
<button onclick="loadJS('file1.js');">Load file1.js</button>
<button onclick="loadJS('file2.js');">Load file2.js</button>
回答by JiminyCricket
Try this on for size: Dynamically Load JS
试试这个大小：动态加载 JS
function loadjscssfile(filename){
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js") //dynamically load and add this .js file
回答by gilly3
JavaScript:
JavaScript：
function loadScript(url)
{
document.body.appendChild(document.createElement("script")).src = url;
}
function loadDefaultScript()
{
loadScript("http://mysite.com/file1.js");
}
function loadAlternateScript()
{
loadScript("http://mysite.com/file2.js");
}
HTML:
HTML：
<input type="button" onclick="loadAlternateScript()" value="Alternate" />
<input type="button" onclick="loadDefaultScript()" value="Default" />
回答by Bhushan Pawar
You can use this function this will work perfectly
您可以使用此功能，这将完美运行
function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file
回答by Razan Paul
Via Jquery:
通过jQuery：
var getJSfile = function(src) {
var jsfile = $("<script type='text/javascript' src='"+src+"'>");
$("head").append(jsfile);
};
getJSfile ("home.js");
