js--history、location、navigator对象

2018-12-092137
秦泽森
web研发

history对象

属性:

  • History.length 当前窗口访问过的网址数量(包括当前网页)
  • History.state:History 堆栈最上层的状态值

方法:

  • History.back():移动到上一个网址,等同于点击浏览器的后退键。对于第一个访问的网址,该方法无效果。
  • History.forward():移动到下一个网址,等同于点击浏览器的前进键。对于最后一个访问的网址,该方法无效果。
  • History.go():接受一个整数作为参数,以当前网址为基准,移动到参数指定的网址,比如go(1)相当于forward(),go(-1)相当于back()。如果参数超过实际存在的网址范围,该方法无效果;如果不指定参数,默认参数为0,相当于刷新当前页面。
  • History.pushState(state, title, url)方法用于在历史中添加一条记录。(不会自动跳转) state:一个与添加的记录相关联的状态对象,主要用于popstate事件。该事件触发时,该对象会传入回调函数。也就是说,浏览器会将这个对象序列化以后保留在本地,重新载入这个页面的时候,可以拿到这个对象。如果不需要这个对象,此处可以填null。 pushState想要插入一个跨域的网址,导致报错。这样设计的目的是,防止恶意代码让用户以为他们是在另一个网站上,因为这个方法不会导致页面跳转。
  • History.replaceState(state, title, url)方法用于在历史中修改当前的记录。(不会自动跳转)
  • popState事件,pushState、replaceState不会触发。可以为其指定回调函数。window.onpopState = function(event){}回调函数的参数是一个event事件对象,它的state属性指向pushState和replaceState方法为当前 URL 所提供的状态对象(即这两个方法的第一个参数)。

URLSearchParamsAPI 用于处理 URL 之中的查询字符串,即问号之后的部分。没有部署这个API的浏览器,可以用url-search-params这个垫片库。 方法:

  • has() 返回一个布尔值,表示是否具有某个参数
  • get() 返回指定参数的第一个值
  • getAll() 返回一个数组,成员是指定参数的所有值
  • set() 设置指定参数
  • delete() 删除指定参数
  • append() 在查询字符串中追加键值对
  • toString() 返回整个查询字符串
  • keys() 遍历所有参数名
  • values() 遍历所有参数值
  • entries() 遍历所有参数的键值对
  • Navigator.userAgent 返回浏览器的 User Agent 字符串,表示浏览器的厂商和版本信息。
  • Navigator.plugins属性返回一个类似数组的对象,成员是 Plugin 实例对象,表示浏览器安装的插件,比如 Flash、ActiveX 等。
  • Navigator.platform属性返回用户的操作系统信息,比如MacIntel、Win32、Linux x86_64等 。
  • navigator.onLine属性返回一个布尔值,表示用户当前在线还是离线(浏览器断线)。监听online和offline。
  • Navigator.language属性返回一个字符串,表示浏览器的首选语言。该属性只读。
  • Navigator.languages属性返回一个数组,表示用户可以接受的语言。Navigator.language总是这个数组的第一个成员。HTTP 请求头信息的Accept-Language字段,就来自这个数组。改变会触发languagechange事件。Navigator.geolocation属性返回一个 Geolocation 对象,包含用户地理位置的信息。注意,该 API 只有在 HTTPS 协议下可用,否则调用下面方法时会报错。 1)Geolocation.getCurrentPosition():得到用户的当前位置 2)Geolocation.watchPosition():监听用户位置变化 3)Geolocation.clearWatch():取消watchPosition()方法指定的监听函数
  • Navigator.cookieEnabled属性返回一个布尔值,表示浏览器的 Cookie 功能是否打开。反映的是浏览器的特性,与用户设置是否可以存储cookies无关。
  • Navigator.sendBeacon()方法用于向服务器异步发送数据

Location对象

表示当前显示的 web 地址,能控制浏览器显示文档的位置。将一个含URL的字符串赋给location(location.href)时,浏览器会把所指文档装载进来显示。

属性

  • hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。
  • host 属性是一个可读可写的字符串,可设置或返回当前 URL 的主机名称和端口号。
  • hostname 属性是一个可读可写的字符串,可设置或返回当前 URL 的主机名。
  • href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL。改变时会刷新页面。
  • pathname 属性是一个可读可写的字符串,可设置或返回当前 URL 的路径部分。
  • port 设置或返回当前 URL 的端口号。
  • protocol 设置或返回当前 URL 的协议。(包括”:“)
  • search 设置或返回从问号 (?) 开始的 URL(查询部分)。

方法

  • assign() 可加载一个新的文档。
  • reload(boolean) 是否绕过缓存加载文档。 false时会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变
  • replace(newURL) 方法不会在 History 对象中生成一个新的记录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前记录。

作者简介:莫冥,芦苇科技web前端开发工程师 专注于前端领域框架、交互设计、图像绘制、数据分析等研究,访问 www.talkmoney.cn 了解更多。

分享
点赞0
打赏
上一篇:代理工具Fiddler -调试与替换接口状态
下一篇:HTTP状态码