如何动态加载 javascript 文件？ [复制]答案

【问题标题】：How do I load a javascript file dynamically? [duplicate]如何动态加载 javascript 文件？ [复制]
【发布时间】：2011-07-11 06:09:05
【问题描述】：

我有这个代码：

    <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 应该被加载。

我该怎么做？

【问题讨论】：

你的eval是什么意思？谢谢
if (JS == true) dosent 表示它被按下，它只是表示元素存在于 DOM 中，为什么不直接包含所有脚本，然后根据 JS 的存在调用相应的函数
@user455318：eval 用于将字符串作为 Javascript 代码执行 @kjy112：不，你不会。请不要建议 eval 作为解决方案，除非这是唯一的方法。糟糕的指南会建议像eval("document."+id+".value="+numericValue) 这样的代码。这是非常不安全的！

标签： javascript

【解决方案1】：

试穿尺寸：Dynamically Load 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

【讨论】：

你没有在这个函数中使用“文件名”参数，所以它不起作用.....迟到了 5 年评论:-) 很好的链接

【解决方案2】：

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

【讨论】：

别忘了设置type参数。
type 属性在 HTML5 中是可选的。
服务器是mime类型的权威来源。 type 属性总是被忽略，不仅仅是 HTML5。包含它没有任何好处。这实际上是一个缺点，因为它具有误导性。
可以看一下链接：answer

【解决方案3】：

您不能以这种方式将 HTML 嵌入到 Javascript 中。基本上，您想要的是嵌入一个脚本元素，在单击按钮时指向某个 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>

【讨论】：

请注意，调用“document.body.appendChild(jsElm);”后加载的javascript文件中的函数不可用，但是当js准备好时有jsElem.onload事件发出信号。
如何使用document.write(unescape("%3Cscript src='file.js' type='text/javascript'%3E%3C/script%3E"));
@Ithar document.write 应避免使用，请参阅developer.mozilla.org/en-US/docs/Web/HTML/…
嗨，@Lekensteyn 我正在使用相同的动态 javascript 加载。我已经使用了上述代码，但我的页面仍然卡住了 2-3 秒，然后显示了我的加载器。关于为什么会发生的任何建议。也尝试了异步属性。
@DeepanksheeJain 如果你有一个大文件，下载完成可能需要一段时间。

【解决方案4】：

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

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

【讨论】：

可以看一下链接：answer

【解决方案5】：

通过 Jquery：

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

    getJSfile ("home.js");

【讨论】：

可以看一下链接：answer