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

Posted 2021-04-01

我的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部分中的脚本标记但由于脚本标记仅在页面加载时加载而未加载（如果我错了，请在此处更正）。

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

提前致谢。

答案

使用jQuery $ .getScript（）函数应该为你完成这项工作。

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

这是一段示例代码：

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

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

另一答案

你的代码几乎可以工作你需要使用.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'的操作时，您正在对象上设置属性，但这与将该属性与实际节点属性相关联的方式不一定相同。

另一答案

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

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

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

另一答案

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

我错过的一个信息是，路径必须是绝对的。