RL 是一个网页地址。
URL可以由字母组成,如"runoob.com",或互联网协议(IP)地址: 192.68.20.50。大多数人进入网站使用网站域名来访问,因为 名字比数字更容易记住。
URL - 统一资源定位器
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
一个网页地址实例: http://www.runoob.com/html/html-tutorial.html 语法规则:
scheme://host.domain:port/path/filename
说明:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机(http 的默认主机是 www)
domain - 定义因特网域名,比如 runoob.com
:port - 定义主机上的端口号(http 的默认端口号是 80)
path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
filename - 定义文档/资源的名称
常见的 URL Scheme
以下是一些URL scheme:
Scheme | 访问 | 用于... |
---|---|---|
http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
https | 安全超文本传输协议 | 安全网页,加密所有信息交换。 |
ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
file | 您计算机上的文件。 |
URL 字符编码
URL 只能使用 ASCII 字符集.
来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
在线实例
如果您点击下面的"提交"按钮,浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。
试着输入一些字符,然后再次点击提交按钮。
URL 编码实例
字符 | URL 编码 |
---|---|
€ | %80 |
£ | %A3 |
© | %A9 |
® | %AE |
À | %C0 |
Á | %C1 |
 | %C2 |
à | %C3 |
Ä | %C4 |
Å | %C5 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
图类、打车、外卖等类型的手机APP,一进入便咨询是否允许获取我们的位置,允许之后会根据我们所在位置推荐好物,逐渐地 H5 网页也开始获取用户位置。Geolocation是 H5 新增的对象,用于定位。常见打开网页有两种方式:移动端和PC端。它们是根据什么如何定位的呢?
geolocation对象继承在navigator对象内,它有两种方法可以获取用户位置getCurrentPosition()和watchPosition(),还有clearWatch取消watchPosition。
getCurrentPosition:获取一次位置
navigator.geolocation.getCurrentPosition(success=>{
console.log(success.coords)//包含位置的经纬度、速度、海拔、经纬度精度、海拔精度信息
},fail=>{
console.log(fail)//获取失败的原因
},{
//可增加的4个配置参数
enableHighAccuracy:true,//高精度
timeout:5000,//超时时间,以ms为单位
maximumAge:24*60*60*1000,//位置缓存时间,以ms为单位
})
位置获取成功后返回的 success.coords 的属性
watchPosition:不断获取位置
navigator.geolocation.watchPosition(
success=>{
console.log(success.coords)//包含用户位置速度海拔等信息
},
fail=>{
console.log(fail)//定位失败原因
},
{
enableHighAccuracy:true,//高精度
timeout:60*1000,//超时,以ms为单位
maximumAge:24*60*60*1000,//位置缓存时间,以ms为单位
frequency:1000,//获取频率
}
)
位置获取成功后返回的 success.coords 的属性与上述getCurrentPosition的一致。它两唯一的区别就是一个获取一次,另外一个获取多次,多了一个获取频率参数。
clearWatch(): 取消当前位置的获取,停止 watchPosition 方法。
clearWatch 与 js 中的clearInterval类似,clearInterval用于清除定时器。使用时语法如下:
var wPId = navigator.geolocation.watchPosition(
success=>{
console.log(success.coords)//包含用户位置速度海拔等信息
},
fail=>{
console.log(fail)//定位失败原因
},
{
enableHighAccuracy:true,//高精度
timeout:60*1000,//超时,以ms为单位
maximumAge:24*60*60*1000,//位置缓存时间,以ms为单位
frequency:1000,//获取频率
}
)
navigator.geolocation.clearWatch(wPId)
由于该特性可能侵犯用户的隐私,使用时自动会询问用户是否同意授权位置,除非用户同意,否则无法获取到用户位置。
function getPosition(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(res){
console.log("res",res)//位置信息
},function(err){
console.log("err",err)
})
}
}
getPosition()
在电脑上,直接使用浏览器打开文件,浏览器立马弹出如下显示框:
点击禁止后,调试器中打印出报错信息,报错信息为:
{
code: 1
message: "User denied Geolocation" //用户拒绝地理位置
}
点击允许之后,发现并未打印出位置信息,什么原因呢?PC是根据电脑的IP地址来解析位置的,此时直接打开文件没有域名或ip,所以无法获取位置,必须把文件放到服务内,如果你是不会起服务可以下载nginx,下载安装成功之后文件放入html文件夹内,启动nginx就可以访问了。
启动本地服务,再次获取位置之后,发现依旧报错,无法返回位置,报错信息为:
{
code: 1,
message: "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)."//只允许安全来源
}
意思就是只能在https域名下才可以哦!
还需要注意的是chrome的google浏览器也不能获取位置,但是IE浏览器可以获取到。
把上述案例放到线上,获取位置只要用户点击同意就没有问题啦!
除此之外,带有位置的我们经常会用到输入位置,在地图中自动标记一个点,移动标记点到更具体的位置,如图:
一般需要绘制地图的时候,我们就借助三方的百度、高德、腾讯等地图,注册账号,申请密钥才可以使用。有空了可以去多看看,多了解了解!
位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
浏览器支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).
注意:Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例,可返回用户位置的经度和纬度
实例
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
*请认真填写需求信息,我们会在24小时内与您取得联系。