Question

我正在尝试从HTML文件中调用JavaScript中的方法。具体来说，调用方法＆＃34;说＆＃34;来自Dog and Cat（显示在HTML下方）。我想我应该使用window.onload = function()或类似的东西onload，但我不知道如何调用这些方法。

这是HTML内容：

<!DOCTYPE html>
<html>
    <head>
        <script src="Ej6.js"></script>

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

    </head>

    <body>

    </body>
</html>

这是我的JavaScript代码，我想调用的函数是：

function Animal(name, eyeColor) {
    this.name = name;
    this.eyeColor = eyeColor;
}

Animal.prototype.getName=function() {
    return this.name;
};

Animal.prototype.getEyeColor=function() {
    return this.eyeColor;
};

Animal.prototype.toString=function() {
    return this.name + " " +
           this.eyeColor;
};

function Dog(name, eyeColor) {
    Animal.call(this, name, eyeColor);
}

Dog.prototype = new Animal();

Dog.prototype.toString=function() {
    return Animal.prototype.toString.call(this);
};

Dog.prototype.speak=function() {
    return "woof";
};

function Cat(name, eyeColor) {
    Animal.call(this, name, eyeColor);
}

Cat.prototype = new Animal();

Cat.prototype.toString=function() {
    return Animal.prototype.toString.call(this);
};

Cat.prototype.speak=function() {
    return "meow";
};

Answer 1

您可以像正常一样使用JavaScript，包括每个脚本，无论是间接使用<script src="..."></script>还是直接<script>...</script>共享相同的范围。

function Animal(name, eyeColor) {
  this.name = name;
  this.eyeColor = eyeColor;
}
Animal.prototype.getName = function() {
  return this.name;
};
Animal.prototype.getEyeColor = function() {
  return this.eyeColor;
};
Animal.prototype.toString = function() {
  return this.name + " " +
    this.eyeColor;
};

function Dog(name, eyeColor) {
  Animal.call(this, name, eyeColor);

}
Dog.prototype = new Animal();
Dog.prototype.toString = function() {
  return Animal.prototype.toString.call(this);
};
Dog.prototype.speak = function() {
  return "woof";
};

function Cat(name, eyeColor) {
  Animal.call(this, name, eyeColor);

}
Cat.prototype = new Animal();
Cat.prototype.toString = function() {
  return Animal.prototype.toString.call(this);
};
Cat.prototype.speak = function() {
  return "meow";
};

<!-- This is inside the HTML -->
<script>
  window.onload = function() {
    myCat = new Cat("Kitten", "green");
    console.log(myCat.speak());
  }
</script>

Answer 2

在加载所有内容资源（图像等）之后发生

window.onload。如果您不想使用它，可以在主代码之后附加对象初始化，例如。

＆＃13;

function Animal(name, eyeColor) {
  this.name = name;
  this.eyeColor = eyeColor;
}
Animal.prototype.getName = function() {
  return this.name;
};
Animal.prototype.getEyeColor = function() {
  return this.eyeColor;
};
Animal.prototype.toString = function() {
  return this.name + " " +
    this.eyeColor;
};

function Dog(name, eyeColor) {
  Animal.call(this, name, eyeColor);

}
Dog.prototype = new Animal();
Dog.prototype.toString = function() {
  return Animal.prototype.toString.call(this);
};
Dog.prototype.speak = function() {
  return "woof";
};

function Cat(name, eyeColor) {
  Animal.call(this, name, eyeColor);

}
Cat.prototype = new Animal();
Cat.prototype.toString = function() {
  return Animal.prototype.toString.call(this);
};
Cat.prototype.speak = function() {
  return "meow";
};

const dog = new Dog('test', 'brown')
console.log(dog.speak());

＆＃13;

从HTML调用JavaScript中的函数

2 个答案: