天道酬勤,学无止境

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.

评论

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>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何防止在Phonegap应用中出现两次提示进行地理位置定位?(How to prevent double prompt for geolocation in Phonegap app?)
    问题 我为iPhone创建了一个PhoneGap应用,该应用通过Webview内部的JavaScript使用地理位置。 首次运行该应用程序时,它将提示我允许对此应用程序进行地理位置定位。 当我点击“确定”时,它将再次提示我同样的问题,但是这一次它指出“ index.html”需要使用地理定位的权限。 这是有道理的,因为iOS可能第一次和第二次浏览器都需要许可才能允许对应用本身进行地理定位。 但是,由于不会带来良好的用户体验,因此: 如何防止出现这种双重提示? (如果可以阻止第二个提示,我就够了) 回答1 我找到了问题的原因。 在完全加载Phonegap之前navigator.geolocation.getCurrentPosition(onsuccess, onerror)会调用navigator.geolocation.getCurrentPosition(onsuccess, onerror) 。 这意味着将触发Webview的地理位置调用(而不是通过PhoneGap进行的本地调用),这将再次请求许可(的确是有道理的)。 将其与智能手机上的常规Safari浏览器进行比较。 它将要求每个新网站都获得地理位置许可。 在应用程序启动时通过PhoneGap加载index.html时是相同的。 但是,解决方案是等待PhoneGap完全加载后触发的deviceready事件:
  • Accessing user's latitude and longitude when loading HTML5 geolocation in iframe
    I am using HTML5 Geolocation to get the user's latitude and longitude. It works fine on all browsers when the page is opened directly, but now I have to put the geolocation code inside an iframe. After putting it in the iframe, the geolocation doesn't prompt for the user's coordinates. How do I get the user's latitude and longitude when the page is loading in an iframe? let's say this is the code: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your coordinates:</p> <button onclick="getLocation()">Try It</button> <script> var x=document.getElementById("demo"); function
  • 每次用户重新加载页面时,均设置html5地理位置询问权限(Make html5 geolocation ask permission every time user reloads the page)
    问题 为什么我们需要: 我们的网站上有一些页面,允许用户输入一些数据并搜索他们所在区域的其他客户。 当用户打开该页面时,必须显示弹出消息 http://foo.bar.com想使用您的当前位置。 之后,用户可以丢弃该信息并手动填写位置字段,也可以接受并自动重定向到结果页面。 问题: 问题在于,当用户第一次选择任何提及的选项时,浏览器会记住该选项,下次不会再询问。 因此,当用户接受它时,每次他打开搜索页面时,它都会自动将他重定向到结果页面,而无需任何询问。 代码: 我们正在使用基本的html5地理位置代码 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(LocationMethod); } 结论: 我非常确定,不可能更改浏览器本地的权限。 但是我希望有人会为这个问题提供很好的解决方案。 谢谢。 回答1 用户单击拒绝/允许浏览器后,浏览器就会记住该站点的决定。 避免拒绝的最好方法是仅在用户单击表示要使用其位置的内容时才调用getCurrentPosition(...)。 然后他可能会很乐意分享它:) 一个很好的例子是在foursquare网站上。 在输入时,您可以转到某个城市的地图,只有在该位置单击“使用我的位置”地图上的按钮时,它才会提示您。 如果您拒绝该位置,则还可以显示一条信息消息,
  • Geolocation without Prompt
    I know about the HTML5 way to do geolocation, but the caveat is that it has to prompt the user for permission. navigator.geolocation.getCurrentPosition It gets particularly annoying when I would like to do geolocation right at the home page to serve customized content based on location: no one likes to get a prompt every time he or she visits your site. The idea is to use external services to do geolocation based on IP address or something similar to get a less accurate estimate of the user's location and give the user a prompt only when that location is really off. Are there any good
  • 检查用户浏览器中的位置设置是否已关闭(check if location setting has been turned off in users browser)
    问题 我想hide()或show()一个按钮,该按钮允许用户根据他们当前是否允许在其浏览器设置中使用位置来使用其当前位置。 以下代码仅检查浏览器是否支持地理位置,而不检查特定用户是否允许地理位置。 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="Geolocation is not supported by this browser.";} } 是否可以为他们的浏览器设置检测到一个布尔值,让我知道当前是否允许使用位置信息? 感谢您的任何建议。 回答1 您是否阅读过http://www.w3schools.com/html/html5_geolocation.asp 您要做的是检查错误,以查看它们是否允许该请求或拒绝该请求。 function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else { x.innerHTML = "Geolocation is not supported by this browser."; } }
  • 通过html5和javascript获取用户地理位置(getting users geolocation via html5 and javascript)
    问题 我正在尝试通过html5 geolcation api获取用户地理位置信息,并且我使用了以下代码段: if (navigator.geolocation) { var timeoutVal = 10 * 1000 * 1000; navigator.geolocation.getCurrentPosition( displayPosition, displayError, { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 } ); } else { // DO SOME STUFF HERE } function displayPosition(position) { // configuration var myZoom = 12; var myMarkerIsDraggable = true; var myCoordsLenght = 6; var defaultLat = position.coords.latitude; var defaultLng = position.coords.longitude; document.getElementById('latitude').value = defaultLat; document.getElementById('longitude')
  • 未经请求就进行地理定位[重复](geolocation without requesting permission [duplicate])
    问题 这个问题已经在这里有了答案: 使用地理位置获取城市名称(重复) (12个答案) 去年关闭。 Ive注意到,基于html5的现代地理位置总是询问用户“您是否要与该网站共享您的位置?”。 很好,但是我知道还有其他途径可以尝试确定球场地理位置,而无需请求此许可。 如果我还记得的话,这些服务使用ip数据库来尝试跟踪地理位置信息并将其提供给Web应用程序。 因此,在我的网站上,我希望获得用户的邮政编码的“最佳猜测”,而无需请求地理位置许可。 最简单和/或最好的方法是什么? 回答1 IP地理位置不太准确,但是您不需要用户许可。 http://ipinfo.io API(这是我的服务)使其变得非常简单。 这是一个jQuery示例: $.get("http://ipinfo.io", function(response) { console.log(response.city, response.region, response.country); }, "jsonp"); 此处提供更多详细信息。 回答2 使用_SERVER变量在后端上使用IP位置脚本。 这是未经许可的唯一方法,但有很大的缺点:1)根本不准确2)如果用户使用代理,则IP地址可以由用户更改 但是,如果您不想征求许可,那是唯一的方法。 或者,您也可以向用户询问其邮政编码,因为他们想使用您的网站,所以他们也可以:) 另外
  • Using navigator.geolocation.getCurrentPosition in WebView on Android 2.0+ (PhoneGap related)
    I've been working with PhoneGap and it's been great, but I've run into a problem with getting location on a Verizon Droid w/ 2.0.1 (works as expected on a G1 w/ 1.6). GeoLocation API Support was added to Android in 2.0 (Eclair) and it works in the default browser on a Verizon Droid (on 2.0.1). That is, if I visit a website that calls navigator.geolocation.getCurrentPosition(success_callback, error_callback), the device prompts that the current domain "wants to know your location" in a dialog with options to "Share location" or "decline". If I select "Share location", success_callback
  • HTML5新特性
    HTML5新特性 HTML5新特性HTML5W3C对HTML5的需求整体原则HTML5新特性1.语义化标签(HTML5 中的区块和段落元素)2.增强的表单3.多媒体音频和视频\音频\视频 4.3D, 图像 & 效果CanvasSVGWebGL 5.通信Web Sockets (en-US)Server-sent eventsWebRTC 6.离线 & 存储离线存储sessionStoragelocalStorageIndexedDB 7.性能 & 集成HTML Drag and Drop API地理位置 APIWeb Workers HTML5新特性 HTML5 先来看看MDN上面对HTML5的定义 HTML5 是定义 HTML 标准的最新的版本。 该术语通过两个不同的概念来表现: 它是一个新版本的HTML语言,具有新的元素,属性和行为,它有更大的技术集,允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们,不过大多数时候仅缩写为一个词HTML5。 关于HTML5技术的资源,根据其功能分为几个组。 语义:能够让你更恰当地描述你的内容是什么。连通性:能够让你和服务器之间通过创新的新技术方法进行通信。离线 & 存储:能够让网页在客户端本地存储数据以及更高效地离线运行。多媒体:使 video 和 audio 成为了在所有 Web 中的一等公民。2D/3D 绘图
  • HTML5地理位置与Google Maps地理位置api(HTML5 geolocation vs Google Maps Geolocation api)
    问题 我对于为什么选择通过HTML5的免费(显然)无限的navigator.geolocation功能使用受限访问Google Maps Geolocation API感到有些困惑? 据我所知,Google版本的唯一优势是它对IE8等浏览器的支持增加了。 我在这里缺少重要的东西吗? 还是没有什么区别? 在进一步的调查中,我们注意到,当我们在Chrome中使用navigator.geolocation时,实际上会调用Google api来获取信息(由6年前的此答案作为备份)。 因此,这就引出了一个问题,它仍然有限吗? 如果是的话,在什么时期内减价多少? 回答1 Google Maps Geolocation API是一个HTTP端点,它接受用户提供的有关附近Wifi网络和手机信号塔的JSON数据,并估算用户的位置。 HTML5 navigator.geolocation对象提供了浏览器API,该API会执行一些操作,然后生成用户位置的估算值。 根据W3C地理位置规范: API本身与基础位置信息源无关。 位置信息的常见来源包括全球定位系统(GPS)和从网络信号(例如IP地址,RFID,WiFi和蓝牙MAC地址,GSM / CDMA小区ID以及用户输入)推断出的位置。 navigator.geolocation函数可以利用浏览器应用程序可用的任何信息,包括来自设备GPS硬件的任何信息
  • HTML 5 Geo Location Prompt in Chrome
    Just starting to get into HTML 5 and an testing out geo location...liking it so far. I am hitting a bit of a speed bump though...when I try to get my geo location, chrome automatically blocks the page from getting my location. This does not happen at other sites such as the site below: http://html5demos.com/geo The scripts I'm using: <script type="text/javascript" JavaScript" SRC="geo.js"></script> <script type="text/javascript" JavaScript" SRC="Utility.js"></script> <script type="text/javascript" JavaScript" SRC="jquery.js"></script> <script type="text/javascript" JavaScript" SRC="modernizr
  • 在Android 2.0+上的WebView中使用navigator.geolocation.getCurrentPosition(与PhoneGap相关)(Using navigator.geolocation.getCurrentPosition in WebView on Android 2.0+ (PhoneGap related))
    问题 我一直在使用PhoneGap,但效果非常好,但是在Verizon Droid w / 2.0.1上定位时遇到了问题(在G1 w / 1.6上可以正常使用)。 GeoLocation API支持是在2.0(Eclair)中添加到Android的,并且可以在Verizon Droid(在2.0.1上)的默认浏览器中使用。 也就是说,如果我访问一个调用navigator.geolocation.getCurrentPosition(success_callback,error_callback)的网站,则设备会在对话框中提示当前域“想知道您的位置”,并带有“共享位置”或“拒绝”选项。 如果我选择“共享位置”,则会最终使用位置数据调用success_callback。 如果我在WebView中访问相同的网站,则对navigator.geolocation.getCurrentPosition的调用不会生成JavaScript错误,但是不会显示“共享您的位置”对话框,也不会调用任何回调。 在logcat中,我看到似乎是一个相关的错误:“ 02-15 10:37:00.413:ERROR / geolocationService(16871):从系统中注册位置更新时捕获了安全异常。仅应在DumpRenderTree中发生。” 在我看来,WebView无法注册位置更新,因为它没有所需的权限
  • 始终允许使用Selenium在Firefox中进行地理位置定位(Always Allow Geolocation in Firefox using Selenium)
    问题 我正在使用Selenium为Web应用程序创建一些端到端测试。 我正在使用Python并使用Firefox驱动程序 driver = webdriver.Firefox() 问题是我的Web应用程序使用HTML5地理位置,并且似乎每次运行测试时,我都必须单击Firefox中的“允许位置”弹出窗口,这使测试变得不自动化。 有没有一种方法可以强制Selenium Firefox驱动程序始终在不提示的情况下允许地理定位? 回答1 我相信默认设置是使用新的匿名配置文件启动Firefox。 您可以使用-Dwebdriver.firefox.profile = whatever启动selenium,其中“ whatever”是启动firefox -P时配置文件的名称。 为确保永久登录名和其他cookie没有奇怪之处,请执行以下操作: 使用“ firefox -P”启动Firefox 选择您将用来启动测试的配置文件编辑->首选项->隐私,选择对历史记录使用自定义设置告诉Firefox保留cookie,直到“我关闭Firefox”为止 回答2 您可以强制浏览器返回一些预定义的位置,而无需许可请求。 只需执行以下JavaScript代码: "navigator.geolocation.getCurrentPosition = function(success) { success(
  • Google IP地理位置API [关闭](Google IP Geolocation API [closed])
    问题 关闭。 此问题不符合堆栈溢出准则。 它当前不接受答案。 想要改善这个问题吗? 更新问题,使它成为Stack Overflow的主题。 5个月前关闭。 改善这个问题 是否可以使用任何Google API实时获取我的用户的IP地理位置? 我认为它将使用Google Analytics(分析)数据库,这是唯一一个可以真正在城市级别跟踪我的用户的数据库(我可以测试的任何其他IP-Location-API都显示我的IP地址距离我的真实位置近200公里。 Google将其显示在200m(!)之外!) 我想知道用户的位置(在浏览器端并将其传输到我的服务器或在服务器端)以提供与城市有关的内容。 但是我不想让我的用户成为这些要求使用GPS的烦人弹出窗口之一,所以我想使用IP地址。 有什么建议么? 回答1 如果您不想使用启用了HTML5样式的客户端的GeoIP信息,则将需要一个GeoMax数据库,例如MaxMind的GeoIP Lite数据库,该数据库是免费的,并且在99%的用例中都可以很好地工作。 任何其他具有更准确/详细信息的服务都会使您花费大量金钱。 MaxMind受到很多人的称赞,并且可以很好地满足我的个人需求。 它可以为您提供国家/地区/城市/纬度-经度-坐标/大陆信息。 回答2 您可以使用Google的地理位置API根据用户的IP地址获取经纬度: var apiKey = "Your
  • Make html5 geolocation ask permission every time user reloads the page
    Why we need that: We have some page in our website which allows users to enter some data and search for another customers in their area. When user opened that page the popup message must be shown http://foo.bar.com would like to use your current location. After that user can discard that and fill the location fields manually or accept and be automatically redirected to results page. Problem: The problem is that when user selects any of the mentioned options at first time, browser remembers it and don't ask it next time. So when user accept it, every time he open the search page it will
  • Chrome中的HTML 5地理位置提示(HTML 5 Geo Location Prompt in Chrome)
    问题 刚刚开始进入HTML 5并测试地理位置...到目前为止为止。 不过,我遇到了一些减速带...当我尝试获取地理位置时,Chrome会自动阻止页面获取我的位置。 在其他站点(例如以下站点)上不会发生这种情况: http://html5demos.com/geo 我正在使用的脚本: <script type="text/javascript" JavaScript" SRC="geo.js"></script> <script type="text/javascript" JavaScript" SRC="Utility.js"></script> <script type="text/javascript" JavaScript" SRC="jquery.js"></script> <script type="text/javascript" JavaScript" SRC="modernizr.js"></script> function get_location() { if (geo_position_js.init()) { geo_position_js.getCurrentPosition(show_map, handle_error); } } function show_map(position) { var latitude = position.coords
  • getting users geolocation via html5 and javascript
    I am trying to get the users geolocation via the html5 geolcation api, and i use the following snippet for it: if (navigator.geolocation) { var timeoutVal = 10 * 1000 * 1000; navigator.geolocation.getCurrentPosition( displayPosition, displayError, { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 } ); } else { // DO SOME STUFF HERE } function displayPosition(position) { // configuration var myZoom = 12; var myMarkerIsDraggable = true; var myCoordsLenght = 6; var defaultLat = position.coords.latitude; var defaultLng = position.coords.longitude; document.getElementById('latitude')
  • 一个 Rails 应用程序,它使用 HTML5 地理定位获取用户位置并保存到数据库(A rails app which gets users location using HTML5 geolocation and saves to data base)
    问题 看起来很简单,但我很挣扎。 以下是我目前的观点。 我显示位置坐标只是为了测试它的工作。 但我也想坚持使用数据库,因此调用 ajax。 我这样做是正确的方式还是有更简单或更好的方法? <p id="demo">Click the button to get your coordinates:</p> <button onclick="getLocation()">Try It</button> <script> var x=document.getElementById("demo"); var lat; var long; function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { lat = position.coords.latitude; long = position.coords.longitude; x.innerHTML="Latitude: " + lat + "<br>Longitude: "
  • multiple markers on google maps from firebase database
    <!DOCTYPE html> <html> <head> <title>Geolocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> <!-- Place this inside the HTML head; don't use async defer for now --> <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script> <script src="https://cdn.firebase.com/libs
  • 检查是否允许地理定位并获得Lat Lon(Check if Geolocation was allowed and get Lat Lon)
    问题 我正在构建一个客户端将安装在其页面上的小脚本。 地理位置不是必需的,但是,如果存在,则很高兴。 有没有一种方法可以检查客户页面是否请求了地理位置信息,以及所选择的用户是否允许在不创建其他提示的情况下获取经纬度? 回答1 地理位置API无法实现,但新权限API可以实现 如果您想尝试接收坐标,但又不想通过提示对话框打扰用户,则此代码很有用,因为坐标并不那么重要,也可能会回退到geoIP function getCoords() { return new Promise((resolve, reject) => navigator.permissions ? // Permission API is implemented navigator.permissions.query({ name: 'geolocation' }).then(permission => // is geolocation granted? permission.state === "granted" ? navigator.geolocation.getCurrentPosition(pos => resolve(pos.coords)) : resolve(null) ) : // Permission API was not implemented reject(new Error(