location 对象
location 是最有用的对象之一。
1.提供了与当前窗口中加载的文档有关的信息,
2.提供了导航功能。
3.即是window对象的属性,也是document对象的属性。
即(window.location = document.location)
- 属性列表
属性名 | 例子 | 说明 |
---|---|---|
hash | “#content” | 返回URl中的hash(#号后跟0或多个字符),如果不包括散列,则返回空字符 |
host | “www.jsk.com:80” | 返回服务器名称和端口号(如果有) |
hostname | “www.jsk.com” | 返回不带端口号的服务器名称 |
href | “http://www.jsk.com:80/md?articleId=1” | 返回当前加载页面的完整URL。location对象的toString()方法也返回这个值 |
pathname | “/md” | 返回URL中的目录和文件名 |
port | “8080” | 返回端口号,如果没有返回空 |
protocol | “http:” | 返回页面使用的协议 |
search | “?articleId=1” | 返回URL的查询字符串,以? 开头 |
- 查询字符串参数
//查询字符串参数
function getQueryArr(){
let qs= location.search.length>0? location.search.slice(1):''
let args = {},
item = null;
arr = qs.length>0?qs.split('&'):[]
for (let i = 0; i < arr.length; i++) {
item = arr[i].split('=')
let name = decodeURIComponent(item[0])
let value = decodeURIComponent(item[1])
if (name.length) {
args[name] = value
}
}
return args
}
console.log(getQueryArr());
- 方法
方法名 | 例子 | 说明 |
---|---|---|
assign | location.assign(“http://www.jsk.com”) | 立即打开并生成一条记录 |
replace | location.replace(“http://www.jsk.com”) | 不会在历史记录中生成新记录,不能回到前一个页面 |
reload | location.reload() | 重新加载(有可能能从缓存中加载),如果传递参数true 从服务器重新加载 |
注意
以下三种方式相同
location.assign('http://www.jsk.com')
location.href = 'http://www.jsk.com'
window.location = 'http://www.jsk.com'
history对象
- 方法
方法名 | 例子 | 说明 |
---|---|---|
go | history.go(-1) | 正数 向前n页 负数 向后退n页 如果是string,寻找最近的含有相似字符的页面地址 |
forward | history.forward() | 前进一页 |
back | history.back() | 后退一页 |
vue 的路由跳转以及传参由这些api实现
navigator
主要用来识别客户端浏览器的类型
有userAgent 等重要属性,以后补上