Question

我正在尝试执行以下操作： - 从HTML页面我想在标题中调用.js文件。我希望这个文件包含2个函数，A和B，我想在页面加载时在不同的时间调用它们。第一部分我准备好了，我的问题是： -Function B应该调用另一个.js文件，等待它完成加载并运行一些特定于函数B的代码。

这是我到目前为止所做的：

<head><script type="text/javascript" src="first.js"></script></head>

我有这个来调用first.js中的不同函数

<script language="JavaScript" type="text/javascript">
functionA ();
</script>

现在在first.js：

里面

function functionA () 
{
alert("A runs!");
}

function functionB ()
{
alert("B runs!");
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://www.URL.com" ;

--some additional code--

}

连连呢？谢谢！

Answer 1

首先，您不会调用javascript文件＆＃34;。您加载javascript文件，导致它被解析，并执行任何顶级代码。加载后，您可以调用其中的任何函数。

因此，要从functionB加载javascript文件然后调用其中的函数，您可以完成开始时动态加载的代码，但是您需要添加加载时间的通知：< / p>

function functionB () {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "http://www.URL.com" ;
    script.onload = function() {
        // call the function in the newly loaded scrip here
    };
    document.getElementsByTagName("head")[0].appendChild(script);

}

这里的a post with a loadScript function在加载脚本时进行回调。

这里的post with a bit more capable function可以实际按顺序加载脚本，还包含旧版IE的支持代码（如果需要）。

Answer 2

确保跨浏览器加载外部js文件需要的不仅仅是简单的onload事件;如果你想要一个经过充分测试的解决方案，增加了功能，最好的办法就是使用require.js这样的库。

在某处包含require.js文件后，您的代码将类似于：

function functionA () {
  alert("A runs!");
}

function functionB () {
  alert("B runs!");

 require(['yourotherfile'], function(myfile) { // no js extension, read more in require's docs
     // --some additional code--
 });
}

调用多个JS文件和函数

2 个答案: