2

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

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

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

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

例子：

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

4

1 回答 1

3

来自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>
于 2013-06-27T19:07:04.047 回答