javascript - 每次在 Safari 和移动浏览器上询问地理位置权限

Question

我有一个要求地理定位的网站。它应该只在您第一次打开该网站时询问，但我注意到，如果您在移动设备(使用 Chrome 或 Safari)或在桌面设备上使用 Safari 打开该网站，该网站会在您每次重新加载页面时请求许可。

如果您在装有 Chrome 的计算机上打开该网站，它可以正常运行，没有任何问题。

这是我的代码。这个问题的原因是什么？

jQuery(document).ready(function($) {
    if ("geolocation" in navigator) {
        console.log("Geolocation availbale");
        navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError);
    } else {
        geolocationError()
    }

    function geolocationSuccess(position) {
        console.log(position.coords.latitude, position.coords.longitude);
        $.ajax({
            url: geolocationParams.ajaxurl,
            type: 'POST',
            data: {
                action: geolocationParams.actionLocalities,
                lat: position.coords.latitude,
                lng: position.coords.longitude,
            },
            dataType: 'json',
            success: function(response) {
                console.log("Ajax returned", response);
                $('.homepage-posts-wrapper.third-block-grid').html(response.html);
            }
        })
    }

    function geolocationError(err) {
        console.log(err);
        $.ajax({
            url: geolocationParams.ajaxurl,
            type: 'POST',
            data: {
                action: geolocationParams.actionLocalities,
                    lat: "",
                    lng: "",
            },
            dataType: 'json',
            success: function(response) {
                console.log("Ajax returned", response);
                $('.homepage-posts-wrapper.third-block-grid').html(response.html);
            }
        })
    }
});

Answer 1

浏览器何时决定请求权限完全取决于浏览器，并且有所不同。

现在大多数浏览器都会要求每次使用，除非用户在对话框中单击“记住这个决定”(Firefox 上的示例):

因此，网络应用的最佳做法是不要发出未经请求的地理定位请求，而是让用户通过单击按钮来启动操作。

如果这不适合您的用例，您可以保存第一次成功的地理定位请求的结果(例如，在 cookie 或 localStorage 中)并在用户访问您的网站时使用它.

示例(我试图坚持你的风格):

function onWeHaveALocation(latLng) {
  console.log('Now or not too long ago the user was here:', latLng)
}

function geolocationError() {
  console.log('Location unknown.')
}

function geolocationSuccess(position) {
  const latLng = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  }

  // This is a session cookie. Check the API for different lifetimes.
  document.cookie = 'geolocation=' + JSON.stringify(latLng)

  onWeHaveALocation(latLng)
}

// You might prefer to use a library like https://www.npmjs.com/package/js-cookie instead
const geolocationCookieString = document.cookie
  .split('; ')
  .find(function (cookieKeyValuePair) {
    return cookieKeyValuePair.startsWith('geolocation=')
  })
  ?.split('=')[1]


if (geolocationCookieString) {
  const latLng = JSON.parse(geolocationCookieString)
  onWeHaveALocation(latLng)
} else if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError);
} else {
  geolocationError()
}