帮助用户发现 HTML5 地理位置提示
Posted
技术标签:
【中文标题】帮助用户发现 HTML5 地理位置提示【英文标题】：Assisting users in spotting the HTML5 Geolocation prompt 【发布时间】：2013-06-27 12:56:26 【问题描述】：在用户接受浏览器提示至关重要的网站上工作。 我们注意到很多用户根本没有注意到浏览器中要求用户分享他们的位置的提示。
现在的问题是这个提示在每个浏览器中的显示方式都不同：
Chrome：屏幕顶部 IE：警告框 Firefox：弹出地址栏 等我正在寻找一个简单的 javascript 或 html hack，它允许您在不同浏览器中显示提示的位置旁边放置一个 div。因为我们希望帮助用户发现提示并告知他们为什么需要分享他们的位置。所以基本上是一个简单的脚本，它检查用户的浏览器并在屏幕上放置一个 div 位置提示将出现的位置。
例子：
当然，我们可以手动进行此操作以匹配每个浏览器，但我想知道是否有人已经通过编写脚本解决了这个问题，该脚本可以更轻松地将这个红色 div 放置在每个浏览器的正确位置。
【问题讨论】：
【参考方案1】：来自https://***.com/a/16938481/278722：
function get_browser()
var N=navigator.appName, ua=navigator.userAgent, tem;
var M=ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
M=M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
return M[0];
您可以使用作为消息 div 的类名返回的浏览器，并且只需更改每个浏览器的样式：
<!doctype html>
<html>
<head>
<title>Browser detection</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
#message
position: fixed;
background: red;
padding: 10px;
font-family: arial;
font-weight: bold;
color: #ffffff;
#message.chrome
width: 100%;
height: 40px;
text-align: right;
#message.firefox
width: 300px;
text-align: left;
left: 50%;
top: 40px;
</style>
</head>
<body>
<div id="message">Please click allow geo location</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var browser = ;
var browserClass;
function get_browser()
var N=navigator.appName, ua=navigator.userAgent, tem;
var M=ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
M=M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
return M[0];
function init()
browser = get_browser().toLowerCase();
$("#message").addClass(browser);
$(window).on("load",init);
</script>
</body>
</html>
【讨论】：
以上是关于帮助用户发现 HTML5 地理位置提示的主要内容，如果未能解决你的问题，请参考以下文章
html5获取地理位置，如果用户拒绝了，之后每次加载都提示:拒绝获取地理位置，如何获取权限:如果用
html5获取地理位置，如果用户拒绝了，之后每次加载都提示:拒绝获取地理位置，如何获取权限:如果用
使用HTML5定位获取当前位置是，会提示***想要获取您的位置，我能否修改***的内容，如果能，要怎样修改？