如何动态加载JavaScript文件？

Question

如何动态加载JavaScript文件？

31

我有这段代码：

    <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>

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

我该怎么做？

- user455318

你说的 eval 是什么意思？谢谢。 - user455318

如果(JS == true)并不意味着它被按下，它只是表示该元素存在于DOM中，为什么不直接包含所有脚本，然后根据JS的存在调用相应的函数。 - slier

2

@user455318：eval用于执行字符串作为Javascript代码 @kjy112：不，你不需要这样做。除非没有其他方法可行，请不要建议使用eval作为解决方案。糟糕的指南会建议像eval("document."+id+".value="+numericValue)这样的代码。那是极其不安全的！ - Lekensteyn

5个回答

13

试试这个：动态加载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

- JiminyCricket

1

你在这个函数中没有使用'filename'参数，所以它不会起作用......五年晚评论:-) 不过好链接。 - Drenai

6

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：

<input type="button" onclick="loadAlternateScript()" value="Alternate" />
<input type="button" onclick="loadDefaultScript()" value="Default" />

- gilly3

1

不要忘记设置 type 参数。 - Lightness Races in Orbit

2

HTML5中type属性是可选的。 - gilly3

5

服务器是MIME类型的权威来源。type属性总是被忽略，不仅仅是在HTML5中如此。包含它没有任何优势，实际上会产生误导，因此最好不要加上。 - Terry Roe

你可以查看以下链接：答案 - asmmahmud

0

你可以使用这个函数，它会完美地工作。

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

- Bhushan Pawar

您可以查看以下链接：答案 - asmmahmud

0

通过Jquery：

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

    getJSfile ("home.js");

- Razan Paul

你可以查看以下链接：答案 - asmmahmud

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lekensteyn · Accepted Answer

以那种方式在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>