使用外部 js 文件的 Javascript/HTML5 地理位置答案

【问题标题】：Javascript/HTML5 Geolocation using external js file使用外部 js 文件的 Javascript/HTML5 地理位置
【发布时间】：2013-04-11 13:25:47
【问题描述】：

我刚刚开始在网页中尝试地理定位。

我在 W3Schools (http://www.w3schools.com/html/html5_geolocation.asp) 上找到了有用的代码 sn-p，它可以工作。

我有点困惑的是，如果我放了块（减去标签）在单独的 .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;    
}

【问题讨论】：

它为我工作：jsbin.com/ovabez/1/edit
@PrakashChennupati，确实如此。但在我的服务器上它根本没有。服务器上的某些东西会导致这种情况吗？工作代码：bit.ly/Yp0HUZ 非工作代码（外部文件中的 JS）：bit.ly/10VS7ZU
试试这个也改变你的脚本标签：<script type="text/javascript" src="geo.js"></script>
让我知道这是否有效
恐怕没有区别。另外，我使用了 application/javascript，因为我的印象是这是 javascript 的正确 mimetype (stackoverflow.com/questions/4101394/…) 我真的很困惑，因为我不明白为什么它会在一个而不是另一个中工作。顺便说一句，我的外部 JS 版本（在我上面的评论中链接到的版本对你有用吗？

标签： javascript html geolocation w3c-geolocation

【解决方案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 对象时，将引发异常并停止代码执行。

【讨论】：

好点。尽管我怀疑这是原因，因为我只是在此处发布后才添加到“单文件”版本中。将 id 添加到
现在有另一个控制台错误，表明 x 为空。尝试将脚本移动到页面底部，因为在您尝试检索它时可能无法加载 demo。

【解决方案2】：

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

尝试添加

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

到 ID 为“demo”的元素下方的正文。

它对我有用！

【讨论】：