Question

我刚开始在网页上尝试Geolocation。

我在W3Schools（http://www.w3schools.com/html/html5_geolocation.asp）上找到了有用的代码片段。

我有点困惑的是，如果我把块（减去标签）在一个单独的.js文件中，调用我页面中的js文件，代码根本不起作用。这是为什么？

我希望将最终的工作代码放在自己的.js文件中，我可以从任何页面引用。

js文件与htm / php文件位于同一文件夹中

只要我将脚本还原到我的页面正文中，就可以了。有人可以帮我理解这个原因吗？（如果它有所作为，我正在使用Firefox 20

的index.php

<!DOCTYPE html>
    <html>
    <head>
    <script type="application/javascript" src="geo.js"></script>

    <title>
        TEST 3: GeoLocation
    </title>
    </head>
    <body>
    <p id="demo">Click the button to get your coordinates:</p>
    <button onclick="getLocation()">Try It</button>
    </body>
</html>

geo.js

var x=document.getElementById("demo");

function getLocation(){
if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
}
else{
    x.innerHTML="Geolocation is not supported by this browser.";
}
}

function showPosition(position){
x.innerHTML="Latitude: " + position.coords.latitude + 
"<br />Longitude: " + position.coords.longitude;    
}

Answer 1

来自有问题的评论： Indeed it does. But on my server it doesnt at all. Could something on the server be causing this? Working Code: bit.ly/Yp0HUZ Non-Working Code (JS in external file): bit.ly/10VS7ZU –

引用您的链接：您服务器上的按钮缺少id属性id="btnTryIt"。当您尝试禁用null对象时，将抛出异常并停止执行代码。

Answer 2

我遇到了同样的问题。变量x始终为null。我认为这是因为当您将外部js文件添加到标头时，局部变量x为null，因为它所引用的元素尚未创建。

尝试添加

<script type="text/javascript" language="javascript"> x = document.getElementById("demo"); </script>

到ID为“demo”的元素下面的主体。

它对我有用！

使用外部js文件的Javascript / HTML5 Geolocation

2 个答案: