onClick 返回函数和 GeoLocation

Posted 2023-02-23

【中文标题】onClick 返回函数和 GeoLocation

【英文标题】：onClick return function and GeoLocation

【发布时间】：2020-05-08 11:00:39

【问题描述】：

我正在创建一个用于将文件上传到服务器的网页。在上传文件之前，我的网页会收集用户的地理位置。 但函数“return GetLocation()”不起作用。我的代码绕过了获取 GeoLocation 的 javascript 代码。 这是我的代码：

JavaScript：

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

    function getLocation() 
        if (navigator.geolocation) 
            navigator.geolocation.getCurrentPosition(showPosition);
         else  
            x.innerhtml = "Browser not supported!";
            return false;
        
    
    function showPosition(position) 
        x.innerHTML = "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
        document.cookie="lat="+position.coords.latitude+"lon="+position.coords.longitude;
        return true;
    
    function error(msg) 
      var s = document.querySelector('#status');
      msg = msg.message ? msg.message : msg; 
      s.innerHTML = typeof msg == 'string' ? msg : "failed";
      s.className = 'fail';
      return false;
    
</script>

HTML：

<form name="form" method="post" action="upload.php" enctype="multipart/form-data" >
    <input type="file" name="my_file" />
    <button type="submit" onclick="return getLocation()">Upload File</button>
</form>

【参考方案1】：

您永远不会通过在语句中提及return 来调用函数。

将您的代码更改为

<button type="submit" onclick="callFunction();">Upload File</button>

现在你的getLocation()函数将被调用。

在您的代码中，您只是调用了主函数，但其​​中的函数并没有被调用

也试着给他们打电话

<script>
function callFunction()
getLocation();
showPosition(position);
error(msg);

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

    function getLocation() 
        if (navigator.geolocation) 
            navigator.geolocation.getCurrentPosition(showPosition);
         else  
            x.innerHTML = "Browser not supported!";

        
         return false;
    
    function showPosition(position) 
        x.innerHTML = "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
        document.cookie="lat="+position.coords.latitude+"lon="+position.coords.longitude;
        return false;
    
    function error(msg) 
      var s = document.querySelector('#status');
      msg = msg.message ? msg.message : msg; 
      s.innerHTML = typeof msg == 'string' ? msg : "failed";
      s.className = 'fail';
      return true;
    
</script>

【讨论】：

同样的问题。在没有获取用户位置的情况下，表单移动到 upload.php。

查看我编辑的代码，这是一个正确的语法，但您可能会在代码中遇到position 和msg 的参数问题。

它仍在移动到upload.php，无需请求位置许可。

好吧，我把所有的事情都整理好了，先看看这里返回是必要的，因为你已经给button[type = submit] 提供了一个onclick 事件，否则就不需要它了，我的错误对此感到抱歉。其次，您应该在此 button[type = submit] 调用的函数中设置 return true。现在查看我编辑的答案。

没有用。无需询问位置即可保存文件。

【参考方案2】：

使用 onsubmit="getLocation()" 代替 onclick 并在表单元素上使用它

<form  method="POST" onsubmit="getLocation()" action="upload.php" 
 enctype="multipart/form-data" >
<input type="file" name="my_file" />
<button type="submit">Upload File</button>
</form>

 function getLocation() 

    if (navigator.geolocation) 
        navigator.geolocation.getCurrentPosition(showPosition);
     else  
        x.innerHTML = "Browser not supported!";
        return false;