如何动态加载javascript文件？


How do I load a javascript file dynamically?

本问题已经有最佳答案，请猛点这里访问。

我有这个代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <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">

}

它不起作用。我给了两个按钮，如果第一个按钮按下，应该加载file1.js。如果按下第二个按钮，则应加载file2.js。

我该怎么做？

相关讨论

不能以这种方式将HTML嵌入到JavaScript中。基本上，您需要嵌入一个脚本元素，当单击一个按钮时指向一个特定的javascript文件。这可以通过将事件与DOM组合来完成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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);
}

<button onclick="loadJS('file1.js');">Load file1.js</button>
<button onclick="loadJS('file2.js');">Load file2.js</button>
相关讨论

尝试此项获取大小：动态加载JS

1
2
3
4
5
6
7
8
9
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
相关讨论

JavaScript：

1
2
3
4
5
6
7
8
9
10
11
12
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：

1
2
<input type="button" onclick="loadAlternateScript()" value="Alternate" />
<input type="button" onclick="loadDefaultScript()" value="Default" />
相关讨论

通过jQuery：

1
2
3
4
5
6
 var getJSfile = function(src) {
            var jsfile = $("<script type='text/javascript' src='"+src+"'>");
            $("head").append(jsfile);
        };

    getJSfile ("home.js");
相关讨论

你可以使用这个功能这会很好地工作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
相关讨论