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

【问题标题】：Geolocation Permission asked every time on Safari and mobile browsers每次在 Safari 和移动浏览器上询问地理位置权限
【发布时间】：2022-08-19 02:32:02
【问题描述】：

我有一个要求地理位置的网站。它应该只在您第一次打开网站时询问，但我注意到如果您在移动设备（使用 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);
            }
        })
    }
});

标签： javascript wordpress geolocation

【解决方案1】：

当浏览器决定请求许可时，完全取决于浏览器，并且有所不同。

现在的大多数浏览器都会询问每次使用情况，除非用户在对话框中单击“记住这个决定”（Firefox 上的示例）：

因此，Web 应用程序的最佳实践是不执行未经请求的地理位置请求，而是让用户通过单击按钮来启动操作。

如果这不适合您的用例，您可以保存第一个成功的地理定位请求的结果（例如，在 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()
}

【讨论】：