javaScript之Location,Navigator,History

·  阅读 1170

Location,Navigator,History三个对象是window对象常用属性,

  • window.location
  • window.navigator
  • window.history,window.history属性它表示当前窗口的浏览历史;

window.location

window.location属性提供 URL 相关的信息和操作方法。通过window.locationdocument.location属性,可以拿到这个对象。

  1. location属性:
  • location.href设置或获取当前页面 URL;
  • location.protocol设置或获取当前 URL 的协议,包括冒号(:);
  • location.host设置或获取当前 URL域名,包括冒号(:)和端口;
  • location.hostname设置或获取当前 URL域名,不包括端口;
  • location.port设置或获取当前 URL端口;
  • location.pathname设置或获取当前 URL路径部分,从根路径/开始;
  • location.search设置或获取当前 URL查询字符串部分,从问号?开始;
  • location.hash设置或获取当前 URL哈希值,从#开始;
  • location.origin获取URL 的协议、域名和端口;

`

// 当前网址为
// http://www.baidu.com:8080/path/new.html?id=123#anchors
document.location.href
// "http://www.baidu.com:8080/path/new.html?id=123#anchors" // 完整URL
document.location.protocol
// "http:"      // URL 协议
document.location.host
// "www.baidu.com:8080" // URL域名加端口
document.location.hostname
// "www.baidu.com"  // URL域名
document.location.port
// "8080"   // URL端口
document.location.pathname
// "/path/new.html" // URL路径部分
document.location.search
// "?id=123"    // URL查询字符串部分,从问号?开始
document.location.hash
// "#anchors"       // 哈希值
document.location.origin
// "http://www.baidu.com:8080"      // 协议、域名和端口
复制代码

`

在这些属性里面,只有origin属性是只读的,其他属性都可读写,唯一需要特别说明的是location.href设置新的URL后,是立即跳往新地址。

  1. location方法
  • location.assign()接收一个URL字符串参数,浏览器立即跳往这个新地址;
  • location.replace()接收一个URL字符串参数,浏览器立即跳往这个新地址,用新的文档替换当前文档。注意:使用location.replace()跳转后,是不可以在回退到原来的页面,因为在浏览器的History里的记录是被替换掉的。
  • location.reload()重新加载当前页面;

window.navigator

window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。js代码通过这个属性了解用户的浏览器环境信息。

一: navigator属性

  1. navigator.userAgent返回浏览器的 User Agent 字符串,浏览器的厂商和版本信息;

`

navigator.userAgent;
//谷歌: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
//火狐:Mozilla/5.0 (Windows NT 10.0; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0
//IE:Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
复制代码

` 通过userAgent也可以大致准确地识别手机浏览器,方法就是检测当前navigator.userAgent是否包含了mobi字符串。

`

var ua = navigator.userAgent;
	if (/mobile/i.test(ua)) {
		console.log('手机浏览器')   // 手机浏览器
	} else {
		console.log('非手机浏览器')  // 非手机浏览器
	}
复制代码

` 如果想要识别所有移动设备的浏览器,可以测试更多的特征字符串。

`

/mobile|android|touch|mini/i.test(ua)
复制代码

`

  1. navigator.platform属性返回用户的操作系统信息,比如MacIntel、Win32、Linux x86_64等;

`

navigator.platform
// Win32
复制代码

`

  1. navigator.language,navigator.languagesnavigator.language属性返回一个字符串,表示浏览器的首选语言。该属性只读;

`

navigator.language
//  zh-CN
复制代码

` navigator.languages属性返回一个数组,表示可以接受的所有语言。navigator.language总是这个数组的第一个成员。HTTP 请求头信息的Accept-Language字段,就来自这个数组;

`

navigator.languages
//  [ "zh-CN", "zh", "zh-TW", "zh-HK", "en-US", "en" ]
复制代码

`

  1. navigator.cookieEnabled检测浏览器是否开启cookie功能,返回一个布尔值。
  2. navigator.onLine属性返回一个布尔值,表示用户当前在线还是离线(浏览器断线)。用户变成在线会触发online事件,变成离线会触发offline事件,可以通过window.ononline和window.onoffline指定这两个事件的回调函数。

`

window.addEventListener('offline', function(e) { console.log('offline'); });
window.addEventListener('online', function(e) { console.log('online'); });
复制代码

`

  1. navigator.geolocation属性返回一个 Geolocation 对象,包含用户地理位置的信息。注意,该 API 只有在 HTTPS 协议下可用,否则调用下面方法时会报错。
  • Geolocation.getCurrentPosition():得到用户的当前位置
  • Geolocation.watchPosition():监听用户位置变化
  • Geolocation.clearWatch():取消watchPosition()方法指定的监听函数

window.history

window.history属性指向 History 对象,它表示当前窗口的浏览历史。 History 对象保存了当前窗口访问过的所有页面网址。由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航。

  • history.length:当前窗口访问过的网址数量(包括当前网页)

  • history.state:History 堆栈最上层的状态值 `

    history.length // 1 `

  • history.back():返回到上一个网址,等同于点击浏览器的后退键。对于第一个访问的网址,该方法无效果。

  • history.forward():前进到下一个网址,等同于点击浏览器的前进键。对于最后一个访问的网址,该方法无效果。

  • history.go():接受一个整数作为参数,以当前网址为基准,跳转到参数指定的网址,比如go(1)相当于forward(),go(-1)相当于back()。如果参数超过实际存在的网址范围,该方法无效果;如果不指定参数,默认参数为0,相当于刷新当前页面。

  • history.pushState()方法用于在历史中添加一条记录。该方法接受三个参数,依次为: state:一个与添加的记录相关联的状态对象,主要用于popstate事件。该事件触发时,该对象会传入回调函数。也就是说,浏览器会将这个对象序列化以后保留在本地,重新载入这个页面的时候,可以拿到这个对象。如果不需要这个对象,此处可以填null。 title:新页面的标题。但是,现在所有浏览器都忽视这个参数,所以这里可以填空字符串。 url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

`

history.pushState(null, '', 'http://www.baidu.com');// 页面会跳往百度页面
复制代码

` pushState()方法不会触发页面刷新,只是导致 History 对象发生变化,地址栏会有变化

  • history.replaceState()方法用来修改 History 对象的当前记录。
  • popstate 事件,每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。 注意,仅仅调用pushState()方法或replaceState()方法 ,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。

`

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};
复制代码

`

结语

本次分享主要分享了Location,Navigator,History这三个对象个人觉得最为常用的一些属性,如需查看完整的。可以前往w3c官网,本篇也参考了网道 和 ,w3c官网

收藏成功!
已添加到「」, 点击更改