jQuery 如何在“onclick”事件期间加载外部 Javascript 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19149934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load an external Javascript file during an "onclick" event?
提问by Abu
I have 2 divs in my HTML.
我的 HTML 中有 2 个 div。
<div id="div1"></div>
<div id="div2"></div>
On clicking the "div2" I want to load an external javascript file say for example "https://abcapis.com/sample.js".
单击“div2”时，我想加载一个外部 javascript 文件，例如“ https://abcapis.com/sample.js”。
I tried including the JS file on onclick event like below,
我尝试在 onclick 事件中包含 JS 文件，如下所示，
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://abcapis.com/sample.js";
document.getElementsByTagName("head")[0].appendChild(script);
This included the script tag in the head section but did not load since the script tag will be loaded on page load only(correct me here if i'm wrong).
这包括 head 部分中的 script 标签，但没有加载，因为 script 标签只会在页面加载时加载（如果我错了，请在此处纠正我）。
Is there any other way that I could proceed.
有没有其他方法可以继续。
Thanks in Advance.
提前致谢。
回答by tremor
Using jQuery's $.getScript() function should do the job for you.
使用 jQuery 的 $.getScript() 函数应该可以为您完成这项工作。
http://api.jquery.com/jQuery.getScript/
http://api.jquery.com/jQuery.getScript/
Here is a slice of sample code:
这是一段示例代码：
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
If you are not using jQuery, you're going to have to learn how to use AJAX to dynamically load new script into your page.
如果您不使用 jQuery，您将不得不学习如何使用 AJAX 将新脚本动态加载到您的页面中。
回答by rescuecreative
Your code almost works. You need to use .setAttribute. Here is my working code. I used jQuery as my script:
你的代码几乎可以工作。您需要使用.setAttribute. 这是我的工作代码。我使用 jQuery 作为我的脚本：
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'jquery.min.js');
document.head.appendChild(script);
And that'll do it.
这样就可以了。
EDIT:
编辑：
Some more info. When you do something like script.type = 'text/javascript'you are setting a property on the object but this is not necessarily the same thing as associating that property with an actual node attribute.
还有一些信息。当您执行诸如script.type = 'text/javascript'在对象上设置属性之类的操作时，这不一定与将该属性与实际节点属性相关联的事情相同。
回答by Simon Walsh
Are you using jQuery ? If so, you can try $.getScript().
你在使用 jQuery 吗？如果是这样，您可以尝试$.getScript()。
You might also wanna check this answer. But basically, you can do something like this :
您可能还想查看此答案。但基本上，你可以做这样的事情：
<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>
回答by Marius Seack
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});
An info I missed was, that the path has to be absolute.
我错过的一个信息是，路径必须是绝对的。
