Question

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

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

Chrome：屏幕顶部
IE：提示框
Firefox：弹出地址栏
等

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

示例：

当然我们可以手动设置这个以匹配每个浏览器，但我想知道的是，如果有人已经通过制作一个脚本来解决这个问题，这个脚本可以更容易将这个红色div放在每个浏览器的正确位置。 / p>

Answer 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>

协助用户发现HTML5地理位置提示

1 个答案: