如何在"onclick"事件期间加载外部Javascript文件？

Question

我的HTML中有2个div.

<div id="div1"></div>
<div id="div2"></div>

点击"div2"我想加载外部javascript文件,例如" https://abcapis.com/sample.js ".

我尝试在下面的onclick事件中包含JS文件,

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://abcapis.com/sample.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

这包括head部分中的脚本标记,但由于脚本标记仅在页面加载时加载,因此未加载(如果我错了,请在此处更正).

还有其他方法可以继续吗？

提前致谢.

Answer 1

使用jQuery的$ .getScript()函数应该可以帮到你.

http://api.jquery.com/jQuery.getScript/

这是一段示例代码:

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
}); 

如果您不使用jQuery,那么您将不得不学习如何使用AJAX将新脚本动态加载到您的页面中.

Answer 2

你的代码几乎可以工作 你需要使用.setAttribute.这是我的工作代码.我使用jQuery作为我的脚本:

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'jquery.min.js');
document.head.appendChild(script);

那就行了.

编辑:

更多信息.当您执行类似于script.type = 'text/javascript'在对象上设置属性的操作时,这与将该属性与实际节点属性相关联不一定相同.

Answer 3

你在使用 jQuery 吗？如果是这样，你可以尝试一下$.getScript()。

您可能还想检查这个答案。但基本上，你可以这样做：

<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
    var myLink = document.getElementById('mylink');

    myLink.onclick = function(){

        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "Public/Scripts/filename.js."; 
        document.getElementsByTagName("head")[0].appendChild(script);
        return false;
    }
</script>