协助用户发现HTML5地理位置提示 [英] Assisting users in spotting the HTML5 Geolocation prompt
问题描述
我们注意到很多用户根本没有注意到浏览器中的提示，要求用户分享他们的位置。
现在的问题是此提示在每个浏览器中都显示为不同： b
$ b
我正在寻找一个简单的javascript或html hack，它允许您在不同浏览器中显示提示的位置旁边放置一个div。因为我们希望帮助用户发现提示并告知他们为什么需要分享他们的位置。所以基本上就是一个简单的脚本，用来检查用户的浏览器并在显示该位置提示的屏幕上放置一个div。
示例：
当然，我们可以手动配合每个浏览器，但是我想知道的是如果有人已经通过制作一个脚本来解决这个问题，该脚本可以更容易地将这个红色的div放在每个浏览器的正确位置。
从 https://stackoverflow.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 +）*）/一世）; （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>浏览器检测< / title>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1>
< style>
#message {
position：fixed;
背景：红色;
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;
剩下：50％;
top：40px;
}
< / style>
< / head>
< body>
< div id =message>请点击允许地理位置信息< / div>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>
< script>
var browser = {};
var browserClass;
函数get_browser（）{
var N = navigator.appName，ua = navigator.userAgent，tem;
var M = ua.match（/（opera | chrome | safari | firefox | msie）\ /？\s *（\。？\d +（\.\d +）*）/一世）; （M&&（tem = ua.match（/ version\ /（[\\\\d] +）/ i））！= null）M [2] = tem [1 ]。
M = M？ [M [1]，M [2]]：[N，navigator.appVersion，' - ？'];
return M [0];
函数init（）{
browser = get_browser（）。toLowerCase（）;
$（＃message）。addClass（browser）;
}
$（window）.on（load，init）;
< / script>
< / body>
< / html>
Working on a website where it is crucial the users accept the browser prompt. We've noticed a lot of users simply don't notice the prompt in the browser asking the user to share their location.
The problem right now is this prompt is shown differently in every browser:
- Chrome: Top of the screen
- IE: Alert box
- Firefox: Popup out of the address bar
- etc.
I am looking for a simple javascript or html hack that allows you to place a div next to where the prompt is showed in the different browsers. Because we want to help the users spot the prompt and inform them why they need to share their location. So basically a simple script that checks the browser of the user and positions a div on the screen where this location prompt will appear.
Example:
Of course we could make this manually to match every browser, but what i was wondering was if somebody already solved this by making a script that makes it easier to place this red div in the correct position for every browser out there.
From https://stackoverflow.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];
}
You can use the browser returned as a classname for your message div, and just changed the styling for each browser as such:
<!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地理位置提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
