H5 新API

最新推荐文章于 2022-09-13 19:04:22 发布

追光者de码农

最新推荐文章于 2022-09-13 19:04:22 发布

阅读量570

点赞数

分类专栏： API 文章标签： css3 html5 api

本文链接：https://blog.csdn.net/weixin_48016008/article/details/120491637

版权

API 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. Location对象

location 对象包含有关当前 URL 的信息

location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

属性

属性	描述
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

方法

属性	描述
assign()	加载新的文档。跟href一样，可以跳转页面
replace()	用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退
reload()	重新加载当前文档。相当于点击刷新按钮刷新F5，如果参数为true，相当于ctrl+F5强制刷新

提示：

window.location.reload():它先会根据浏览器的http请求的头部 If-Modified-Since的值来判断在请求文件时文件是否发生变化，如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。 window.location.reload(false);
参数为true，无论文档的修改时间是什么，或者有没有缓存，它都会从新在服务器端请求一次来更新到页面。

2. Navigator对象

navigator 对象是包含有关浏览器的信息。

window.navigator 接口表示用户代理的状态和标识。

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //跳转到手机端的页面
 } else {
    window.location.href = "";     //跳转到pc端的页面
 }

扩展阅读：

常见浏览器User-Agent

浏览器的小故事

HTML5中提供了一个Navigator.geolocation可以获取地理位置，但是由于兼容性太差，只有IE支持，所以在这我们不过多给同学讲解。

2.1 通过第三方API获取

在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。

http://api.map.baidu.com/lbsapi/creatmap/index.html

1.在搜索引擎中搜索“百度地图生成器”。
2.切换当前城市。
3.查找定位地点。
4.拖动地图，微调定位地点，使定位地点位于地图的中央。
5.也可通过地图上的控件调整地图的等级和位置。
6.根据项目需求设置地图的显示尺寸，要现实的操作控件以及地图的状态。
7.添加标注点，并对标注点进行设置说明，然后保存。
8.预览最终结果，然后获取生成代码。
9.拷贝生成代码，创建html文件，例如，map.html，并粘贴拷贝的代码。
生成代码默认使用的gb2312编码

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /\>

修改成utf-8即可。

地图中的图标默认是显示不出来的，需要手动替换图片地址。

http://api.map.baidu.com/lbsapi/creatmap/images/us_cursor.gif、http://api.map.baidu.com/img/markers.png

功能复杂的地图建议：http://lbsyun.baidu.com/ 百度地图api，调用百度API进行地图设置

2.2 Navigator.onLine网络状态

onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true。

if (navigator.onLine) {
  alert('online')
} else {
  alert('offline');
}

提示：浏览器的兼容性.

HTML5 给我们提供了2个事件 online 和 offline，给window绑定事件–检测网络开始状态

window.ononline = function() {
    console.log('你的浏览器在线工作');
};
window.onoffline = function() {
    console.log('你的浏览器离线工作');
}

3. History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

属性

属性	描述
length	返回浏览器历史列表中的 URL 数量。

方法

方法	描述
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。