帮助用户发现 HTML5 地理位置提示答案

【问题标题】：Assisting users in spotting the HTML5 Geolocation prompt帮助用户发现 HTML5 地理位置提示
【发布时间】：2013-06-27 12:56:26
【问题描述】：

在用户接受浏览器提示至关重要的网站上工作。我们注意到很多用户根本没有注意到浏览器中要求用户分享他们的位置的提示。

现在的问题是这个提示在每个浏览器中的显示方式都不同：

Chrome：屏幕顶部
IE：警告框
Firefox：弹出地址栏
等

我正在寻找一个简单的 javascript 或 html hack，它允许您在不同浏览器中显示提示的位置旁边放置一个 div。因为我们希望帮助用户发现提示并告知他们为什么需要分享他们的位置。所以基本上是一个简单的脚本，它检查用户的浏览器并在屏幕上放置一个 div 位置提示将出现的位置。

例子：

当然，我们可以手动进行此操作以匹配每个浏览器，但我想知道是否有人已经通过编写脚本解决了这个问题，该脚本可以更轻松地将这个红色 div 放置在每个浏览器的正确位置。

【问题讨论】：

标签： javascript html geolocation

【解决方案1】：

来自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];
}

您可以使用作为消息 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>

【讨论】：