協助用戶發現HTML5地理位置提示

在一個網站上工作，在這個網站上用戶接受瀏覽器提示至關重要。我們注意到很多用戶根本沒有注意到瀏覽器中的提示，要求用戶分享他們的位置。協助用戶發現HTML5地理位置提示

現在的問題是每一個瀏覽器顯示此提示是不同的：

鉻：屏幕上方
IE的：警告框
火狐：彈出了地址欄的
等

我正在尋找一個簡單的JavaScript或HTML黑客，讓你把一個div放在旁邊的提示顯示在不同的瀏覽器中。因爲我們希望幫助用戶發現提示並告知他們爲什麼需要分享他們的位置。所以基本上就是一個簡單的腳本，用來檢查用戶的瀏覽器並在顯示該位置提示的屏幕上放置一個div。

例子：

當然我們這次可以手動每個瀏覽器匹配，但我想知道是，如果有人已經解決了這個由製作腳本，可以更容易地把這個紅色div在每個瀏覽器的正確位置。

來源

2013-06-27 commonpawn

從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-27 19:07:04 lasse

協助用戶發現HTML5地理位置提示

回答

相關問題