Question

我正在尝试从外部加载的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');
      } 
 });

N.B：使用全局变量很糟糕但它应该可以解决你的问题。请看一下：I've Heard Global Variables Are Bad, What Alternative Solution Should I Use?

Answer 3

将函数附加到window对象。像这样：

// Set the container!
window.app = {};

// Define the function.
window.app.say_hello = function(name) {
   alert(`Hello ${name}`);
};

// Call the function.
app.say_hello("Iran");

我尝试了一切。仅此解决方案有效。：）

Answer 4

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

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

来自html的Javascript外部函数给出'函数未定义'

4 个答案: