在外部 .js 文件中 JavaScript 函数无法正常工作

Question

我使用了一个外部的.js文件进行JavaScript编程，但是我遇到了一个问题，我的HTML找不到任何JavaScript函数。我知道这些函数是有效的，因为如果我将它们从外部文件移动到我的html文件中，它们可以正常工作。在Chrome的JavaScript控制台上，我得到的错误是我的函数未定义。我也知道我的外部页面路径是正确的，因为我有一些画布标签可以完美地读取JavaScript。

简言之，这个可行：

HTML:

<canvas id="Canvas7"></canvas>

JavaScript:

window.onload = function() {
    var g=document.getElementById("Canvas7");
    var ctx=g.getContext("2d");
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

    // ...
};

但是以下代码会报错：“未捕获的引用错误：getLocation未定义”：

HTML：

<button onclick="getLocation()">Click here</button>

JavaScript:

window.onload = function() {
    var x=document.getElementById("location");
    function getLocation(){
        if (navigator.getlocation){
            navigator.getlocation.getCurrentPosition(showPosition,showError);
        }
        else{
            x.innerHTML="GeoLocation is not supported by this browser.";
        }
    }
    // ...
}

这并不是一个很大的问题，因为我可以把JavaScript代码放在HTML文件中，但它会占用很多空间，我更喜欢保持一切井然有序。如果有人知道如何解决这个问题，将不胜感激。

- David Suzuki Moore

---

你确定 JavaScript 在 onclick 事件被触发之前被执行了吗？ - user1585455

@DonovanGlover 我发布的所有Javascript代码都在 'window.onload = function() {' 中，我8个canvas标签的javascript都能正常工作，只是每次我创建一个函数时，Chrome就会给出“Uncaught ReferenceError: getLocation未定义”的错误提示。 - David Suzuki Moore

你能否发布一下你使用的带有指向外部JavaScript文件路径的<script>标签语法？提醒一下，如果JavaScript在外部文件中，你需要通过使用<script type="text\javascript" src="\path\to\script.js"></script>语法将JavaScript加载到页面上，然后才能触发点击事件。 - garromark

@DavidSuzukiMoore 这不是一个全局函数，因此你的浏览器返回了未定义。你需要通过使用例如 window.getLocation = function() { ... } 来将其变成全局函数。 - user1585455

@garromark，脚本标签是<script type="text/javascript" src="test.js"></script>。.js文件与.html和.css文件在同一个目录文件夹中。 - David Suzuki Moore

@DavidSuzukiMoore，很高兴你解决了问题。长期来看，在大型项目中需要定义全局变量和函数是要避免的。你可能需要研究一下jQuery，以一种不污染全局命名空间的方式定义事件驱动代码。 - garromark

Answer 1

由于您已将函数定义在window.onload回调内部，因此getLocation不是全局函数，所以onclick属性提供的代码无法识别它。这就是为什么浏览器返回undefined的原因。简单的解决方法是将其改为全局函数。例如：

window.getLocation = function() { ... }

然而，在较大的项目中，长期要避免使用全局定义变量和函数。

您可以通过放弃使用HTML onclick属性，并在主代码中绑定（非全局）回调来实现此目的：

HTML：

<button id="getloc">Click here</button>

JavaScript:

document.addEventListener("DOMContentLoaded", function() {
    var x = document.getElementById("location");

    getloc.addEventListener("click", function() {
        if (navigator.getlocation){
            navigator.getlocation.getCurrentPosition(showPosition,showError);
        }
        else{
            x.textContent = "GeoLocation is not supported by this browser.";
        }
    });
    // ...
}

- Brian Tompsett - 汤莱恩