GPS 位置的 Web Worker 未从工作脚本返回值答案

【问题标题】：Web Worker for GPS location not returning vales from worker scriptGPS 位置的 Web Worker 未从工作脚本返回值
【发布时间】：2019-02-12 13:07:50
【问题描述】：

我正在从事一个网络工作者项目。 web-worker 是一个小的 javascript 文件，它确定用户的 GPS 坐标，并使用 postMessage 每 5 秒将数据发送回主页脚本。

我已经单独测试了 worker javascript，它似乎工作正常，我可以每 5 分钟获取一次 GPS 坐标并将它们显示在警报框中（用于测试），并且我已经使用另一个 worker 脚本测试了主页代码它似乎也工作正常，但是当我使用工作脚本测试主页代码以获取 GPS 坐标时，工作脚本没有收到任何内容。

谁能帮我弄清楚为什么这不起作用并提出解决方案？

我的目标是拥有一个在后台连续运行的 gps 工作脚本，每 5 分钟更新一次用户的 gps 位置，然后将该信息传递回主页脚本，在那里它将显示并存储在 mysql 数据库中。

这是主页脚本

<!DOCTYPE html>
<html>
    <head>
    </head> 
        <body onload="startWorker()"> 
            <p>Your GPS Coordinates are:
                <output id="result"></output>
            </p>
            <script>
                var w;

                function startWorker() {
                    if (typeof(Worker) !== "undefined") {
                    if (typeof(w) == "undefined") {
                        w = new Worker("x05.js");
                    }
                    w.onmessage = function(event) {
                    document.getElementById("result").innerHTML = event.data;
                    };
                    } else {
                        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
                    }
                }
            </script>
        </body>
</html>

这里是工作文件脚本

function getLocation()
{
    navigator.geolocation.getCurrentPosition(getPosition);
}

function getPosition(position)
{
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var location = 'lat='+position.coords.latitude+'<br>long='+position.coords.longitude;
    postMessage(location);
    setTimeout(getLocation, 5000);

}
getLocation()

【问题讨论】：

为澄清起见，worker 文件脚本名为 x05.js，为了测试，worker 将每 5 秒返回一次 GPS 坐标，但最终代码应每 5 分钟返回一次 GPS 坐标。
@Kaiido，感谢您的意见。我更正了错字并删除了多余的标签，但我遇到了同样的问题。 x05.js 工作脚本没有输出到主页代码。
@Kaiido，是的，我保留了标签并从第 3 行删除了选项卡
我更正了 HTML，但这并没有影响程序的功能。我在最初的问题中更新了代码。

标签： javascript html web-worker

【解决方案1】：

您的问题是 Worker 范围中的 self.navigator 对象与主范围中的对象不同。

这里有一个WorkerNavigator 对象，与Navigator 不同，这个对象没有geolocation 属性。

const w = new Worker(getWorkerURL());
w.onmessage = e => console.log(e.data);

function getWorkerURL() {
  return URL.createObjectURL(new Blob([
    document.querySelector('script[type="worker-script"]')
      .textContent
  ]));
}

<script type="worker-script">
  postMessage(navigator.toString()); // "[object WorkerNavigator]"
  postMessage(navigator.geolocation); // undefined
</script>

您不能在 Worker 中使用 Geolocation API。
但由于这个 API 是异步的，我不确定你为什么要从 Worker 中执行它。

【讨论】：