17

我的 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 部分中的脚本标记，但没有加载，因为脚本标记将仅在页面加载时加载（如果我错了，请在此处纠正我）。

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

提前致谢。

4

5 回答 5

26

使用 jQuery 的$.getScript()函数应该可以为您完成这项工作。

这是一段示例代码：

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

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

于 2013-10-03T02:54:22.207 回答
13

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

于 2013-10-03T02:55:51.057 回答
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>
于 2013-10-03T03:01:30.137 回答
1 
$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

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

于 2017-08-30T10:48:27.373 回答
0

将此函数复制并粘贴到您的代码中。

<script type="text/javascript">
 getScript=(url)=>{
     var script = document.createElement('script');
     script.setAttribute('type', 'text/javascript');
     script.setAttribute('src', url);
     if(document.body == null){
         document.head.appendChild(script);
     }else{
         document.body.appendChild(script);
     }
 }
</script>

现在用你的 .js 文件 url 调用这个函数。例子：getScript('https://abcapis.com/sample.js');

信息：

  • 文件不应包含DOMContentLoaded或$(document).ready()起作用
于 2020-12-03T15:00:29.413 回答