Assisting users in spotting the HTML5 Geolocation prompt

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/17343804/assisting-users-in-spotting-the-html5-geolocation-prompt

标签

javascript

html5

geolocation