javascript - 协助用户发现 HTML5 地理定位提示-6ren

javascript - 协助用户发现 HTML5 地理定位提示

转载作者：行者123 更新时间：2023-11-27 22:31:40

25

4

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

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

Chrome:屏幕顶部
IE:警告框
Firefox:弹出地址栏
等等

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

例子:

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

最佳答案

来自 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>

关于javascript - 协助用户发现 HTML5 地理定位提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17343804/

25

4

0

文章推荐： css - 我的网站主 div 在 IE 7 和 8 中看起来一团糟

文章推荐： css - IE 不透明度 :hover sometimes?

文章推荐： c++ - 将一个常数乘以一个复数 & 运算符重载问题

文章推荐： CSS:关于 float div 和负边距

database - 地理，几何数据和空间数据之间的区别？
我想知道地理数据、几何数据和数据库系统(例如 Oracle 或 SqlSqerver)中表示空间数据的标准数据类型之间有什么区别？对我来说看起来是一样的，但我知道肯定有区别。. 最佳答案首先，地理
sql - 地理( map )数据的理想数据库
我正在寻找用于存储 map 的理想数据库或数据结构的建议。本质上， map 由“道路”组成，如道路、路径等。道路包含节点(具有纬度和经度坐标，有时还有高度。) 任何此类数据库或结构: 应该能够快速(毫
sql-server-2008 - 地理/几何形状面积和形状长度有何用处？
我最近将一些预装的国家和省份形状下载到 Sql Server 2008 中 http://sqlsamplegeo.codeplex.com/ 除了地理列，每个国家和省都有一个“ShapeArea”和
google-analytics - Google Analytics-地理
我对google Analytics（分析）地理如何工作（特别是对于出差用户）有疑问。例如，如果我是森尼韦尔市的用户，并且我打开了一个应用程序，则Google ID在用户ID级别的分析将说用户数= 1
地理 IP 查找上的 Perl 未定义错误
我正在使用 Geo::IP 对 IP 地址执行位置查找。一切正常，直到我遇到一个不在地理 IP 查找数据库中的 IP 地址并且程序突然关闭并给出此错误 Can't call method "city"
java - (地理)位置的通用数据结构/格式是什么？您如何比较它们？
通用(或设备无关)物理位置的结构是什么？我的猜测是它可能是一个有两个长字段的结构，或者类似的东西。此外，给定一个目的地位置和两个候选位置，是否有一种简单的算法可以确定哪个候选位置最接近目的地？我并不
javascript - d3 - 地理 map 悬停选项
我正在使用 d3 geomaps 创建美国的地理 map 。当我将鼠标悬停在状态上时，我希望突出显示该状态。那可能吗？这是我当前的代码:
python - 地理 View ——墨卡托或 PlateCarree
在geoviews guide for Bokeh ，它指出 Bokeh 仅支持墨卡托投影，但大多数示例投影使用 PlateCarree，然后输出看起来像墨卡托投影。有人知道图形的投影和输出是怎么回
python-3.x - 地理 Pandas 为情节上的点添加标签
我有一个geodataframe'all_locations'，其中有一个几何列和一个带有点名称的列。在 map 上绘制点工作正常，但我想用位置名称注释这些点。 ['位置'] ['几何'] BUITH
javascript - D3 地理 map 缩放无法正常工作(Canvas)
我正在尝试在 Canvas 中缩放 map 。 var projection = d3.geoMercator() projection.fitExtent([[margin.left, margin
javascript - Google 地理 map API 中的标签
我目前正在处理这段代码，一切正常，但是当我用鼠标悬停在一个国家/地区时，我只希望国家/地区名称出现在标签中，而不是相关值。我可以这样做吗？如果是，怎么办？提前致谢! 这是javascript代码:
python - 地理 Django Mac OS X
我正在尝试在 mac os 上使用 Geodjango，我使用 postgresql 并安装了 GEOS，但出现此错误: dlopen(/usr/local/lib/libgeos_c.dylib,
python - 地理 View :将 slider 添加到等值线图
我正在研究 GeoViews，我想知道我们是否可以将 slider 作为 GeoViews 中等值线图的输入。我在 gdf 中有另一个变量，它是年份。是否可以使用 slider 显示年度 Tot
google-bigquery - 将 PostGis 几何转换为 BigQuery 地理
我有一个 Geometry (看起来像 WKB) 我的 postgres/postgis 数据库中的对象，我已经转储到 BigQuery 来做一些有趣的事情。我看到它存储为 bytes .我如何构建一
Azure 备份配置 - 从“地理”更改为“本地”(灰显)
我正在使用 DPM 进行 azure 在线备份，并且想要将冗余从 Geo 更改为 Local，但它显示为灰色。有办法改变吗？我不想为此创建新的错误，然后我必须再次将所有内容从 DPM 重新上传到 A
javascript - 使用 Google 地理 map 单击某个区域时，获取变量中的区域名称
我正在实现 Google 地理 map ，我想做的是，例如，如果我单击 US在 map 上，我会将国家/地区名称作为警报(例如，如果我单击美国，我必须将美国作为警报)，我最终可以将其用作变量。当我尝试
javascript - 工具提示随 d3 地理 map 缩放(缩放)
我正在制作一张具有缩放和平移功能的世界地图。我在某些城市上画了圆圈，圆圈的半径由数据决定。当鼠标悬停在这些圆圈上时，将出现一个工具提示来显示数据。代码结构为 //在此选择上调用缩放行为 - 让我们调
c++ - 为什么 boost::geometry 地理 Vincenty 距离在赤道附近不准确？
我需要一个函数来计算一对 WGS 84 之间的距离定位到高精度，我计划使用 boost geometry 中的 geographic 函数. boost geometry Design Rationa
r - 使用 gbuffer 缓冲 R 中的(地理)空间点
我正在尝试缓冲数据集中半径为 100 公里的点。我正在使用函数 gBuffer来自包裹rgeos .这是我到目前为止所拥有的: head( sampledf ) # postalcode
c# - SQL Server 2008 中的空间数据/地理、OR 映射器和 C#
我正在用 C# 开发一个应用程序，它将使用 SQL Server 2008 中的“地理”数据类型来使用和存储地理位置。我计划使用 Entity Framework ，但很快发现它不支持空间数据。有没有

首页

博学

6Ren·AI

商城

javascript - 协助用户发现 HTML5 地理定位提示