Question

我有两个js文件，如下所示

example.js

  var imported = document.createElement('script');
    imported.src = 'myfile.js';
    document.head.appendChild(imported);
  myFunction();

myfile.js

 function myFunction() {
      alert("hello");
 }

当我尝试运行example.js时，我得到myFunction（）未定义的错误。你能告诉我原因吗？提前致谢

Answer 1

向DOM添加脚本并不意味着加载了脚本，任何资源都是一样的，向DOM添加图像并不意味着加载了图像。加载脚本或图像或任何url内容是异步的，DOM不等待完成加载。你的代码是调用函数在将脚本添加到页面结构后立即执行，因此脚本尚未加载。

Pure Js解决方案：

Dynamically load external javascript file, and wait for it to load - without using JQuery

Jquery解决方案

在Jquery中存在有用的方法 getScript ：

$.getScript( "myfile.js", function( data, textStatus, jqxhr ) {
  //here script is loaded and functions can be called 
});

最后要知道的是 appendChild 将孩子添加为最后一个孩子。以你的榜样为例：

<head>
<!-- other head elements -->
<script src="example.js"></script>
<!-- other head elements -->

<!-- HERE WILL BE ADDED FILE, AS LAST CHILD -->
<script src="myFile.js"></script>
</head>

所以 myFile.js 将被添加为最后一个，并且肯定在之前添加的脚本中不可用。

在包含的js文件中调用函数

1 个答案: