根据用户输入动态加载外部Javascript文件

时间:2017-01-25 21:50:43

标签: javascript html

我有N个不同的javascript文件,我想根据用户输入在我的HTML代码中只加载其中一个。有人能指出我如何才能做到这一点?谢谢!

1 个答案:

答案 0 :(得分:2)

您可以随时根据某些输入动态地将<script>标记插入到您的DOM中:

var myScript = document.createElement('script');
myScript.setAttribute('src', 'http://example.com/somescript_depending_on_user_input.js');
document.head.appendChild(myScript);

这将动态地将<script src="http://example.com/somescript_depending_on_user_input.js"></script>元素注入到DOM中并加载所需的脚本。从远程URL加载脚本后,浏览器将对其进行评估。

如果您想等待实际加载外部javascript(与向您的DOM中注入<script>元素相比,这是一个不同的时间点)您可以订阅onload事件。如果要调用仅在动态加载的脚本中定义的某些函数,这可能非常方便:

myScript.onload = function() {
    alert('Youpee, my dynamic script was successfully loaded, I can use it in this callback');
};

另请注意,如果您希望此功能在IE中运行,则可能需要订阅onreadystatechange事件,如this article所示。这将使您的代码在不同的浏览器中工作。