重试地理位置请求，而不刷新浏览器 [英] Retry Geolocation request without refreshing the browser
问题描述
我的Geolocation API有一个特定的问题.这是我的情况:
I have a specific issue with the Geolocation api. This is my scenario:
- 用户登录到禁用了GPS位置的页面(在Chrome-Android中).
- 页面上有一个按钮，按钮的onClick触发
Geolocation.getCurrentPosition - 地理位置转到错误消息中的错误消息用户被拒绝的地理位置"
- 用户转到Android设置(主要在通知抽屉中)并打开位置
- 用户再次单击按钮(此时，位置可用)以获取坐标
- 但是，地理位置api仍然抛出错误用户被拒绝的地理位置"
- User landed on a page ( in Chrome - Android ) with GPS location disabled.
- There is a button on the page, and onClick of the button triggers the
Geolocation.getCurrentPosition - Geolocation goes to the error callback with error message "User denied Geolocation"
- User goes to Android settings ( mostly in notification drawer ) and turn on the location
- User click the button again ( at this time, location is available ) to get the coordinates
- However, Geolocation api still throws the error "User denied Geolocation"
—
- 这时，仅当用户刷新页面并按下按钮时，地理位置请求才有效(注意:该位置仍处于启用状态)
有没有一种方法可以使浏览器在不刷新的情况下工作?
Is there a way to make this work without the browser refresh ?
这是jsbin链接: https://output.jsbin.com/pihenud
Here is the jsbin link: https://output.jsbin.com/pihenud
推荐答案
最后，我能够使用iFrame hack解决此问题.
Finally, I was able to solve this problem using an iFrame hack.
这是解决方案:
与其在主窗口中询问权限，不如动态创建一个iFrame并在其中调用geolocation.getCurrentPosition.现在，我们可以使用window.postMessage将位置数据传递到父浏览器窗口.
Instead of asking the permission in the main window, create an iFrame dynamically and call the geolocation.getCurrentPosition inside it. Now, we can use the window.postMessage to pass the position data to the parent browser window.
当我们不得不再次重试地理位置请求时，我们只需要重新加载iframe即可-这将具有新的网站设置.
When we have to retry the geolocation request again, we just need to reload the iframe -- This will have the new site settings.
如果有人想尝试，这里是iframe代码:
Here is the iframe code if anyone wants to try:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Namshi Geolocation</title>
</head>
<body>
<script type="text/javascript">
var sendMessage = function(result){
window.postMessage(JSON.stringify(result), window.location.origin);
};
var triggerGeolocationRequest = function(){
var options = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
};
var result;
if(window.navigator.geolocation){
window.navigator.geolocation.getCurrentPosition(function(position){
var result = {
type: 'success',
data: {lat: position.coords.latitude, lng: position.coords.longitude}
};
sendMessage(result);
}, function(err){
var result = {
type: 'error',
data: { message: err.message, code: err.code }
};
sendMessage(result);
}, options)
} else {
result = {
type: 'error',
data: { message: 'No Geolocation API' }
};
sendMessage(result);
}
};
window.addEventListener('load', triggerGeolocationRequest);
</script>
</body>
</html>
在您的应用程序代码中，您可以具有一个用于插入iFrame的实用程序.请参见以下代码:
And in your application code, you can have a utility to inject the iFrame. See the below code:
utils.getCurrentPosition = function(){
return new Promise(function(resolve, reject){
var ifr = document.createElement('iframe');
ifr.style.opacity = '0';
ifr.style.pointerEvents = 'none';
ifr.src = location.origin + '/geo.html'; // the previous html code.
document.body.appendChild(ifr);
ifr.contentWindow.addEventListener('message', function(message){
message = JSON.parse(message.data);
if(message.type === 'success'){
resolve(message.data);
} else {
reject(message.data);
}
document.body.removeChild(ifr);
});
});
};
这篇关于重试地理位置请求，而不刷新浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
