Question

html 中的 Javascript 外部函数给出“函数未定义”

2017-03-23

11455

javascript jquery html

我试图从外部加载的 index.js 文件调用 html 页面内的函数，但我总是得到

Uncaught ReferenceError: displayy is not defined

在我的 html 页面内：

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

<script>
    $( document ).ready(function() {
       displayy();
    });
</script>

index.js 文件：

$( document ).ready(function() {
    alert('loaded');
      function displayy() {
    alert('executed');
    } 
 });

我也尝试过：

<script>
    window.onload = function() {
        displayy();
    };
</script>

<script>

    document.addEventListener("DOMContentLoaded", function(event) {
        displayy();
    });
</script>

Answer 1

您不需要再次从脚本运行 displayy 。以下有效：

$(document).ready(function() {
      alert('loaded');
      displayy();
      function displayy() {
        alert('executed');
      } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

在 index.js 中，您可以使用 window 对象调用您的函数。

window.displayy = function(){ 
    return "hello!" 
}

然后您调用它 window.displayy(); 或 displayy();

更好的解决方案是在更高的范围内声明您的函数，如下所示：

var displayy;

$( document ).ready(function() {
      alert('loaded');
      displayy = function () {
       alert('executed');
      } 
 });

注意：使用全局变量不好，但它应该可以解决您的问题。请看这里：我听说全局变量不好，我应该使用什么替代解决方案？

Answer 3

删除 .js 文件中的 document.ready 包装器。

我也遇到了这个问题。我在 document.ready 中调用了主 html 文件中的函数，而外部 .js 文件也将调用的函数定义包装在 document.ready 函数中。一旦我删除了 .js 文件中的包装器，它就可以正常工作了。这使得外部 .js 文件中的函数在作用域上变为全局的。