location对象时BOM最有用的对象之一 ，提供了当前窗口中加载文档的URL信息
. location对象保存着 当前窗口中加载文档的URL信息 和 URL解析后的离散片段
. window.loaction属性 和 document.location属性 都指向了 location对象
window.location === document.location //返回true
. 作用有两个：
1 可以解析URL 并通过它的属性得到
2 可以修改URL 实现导航到新的URL 或者刷新当前页面
一 获取URL
1）常用属性
. 对象属性 返回值
location.href 获取或者设置 整个URL
location.host 返回主机名+端口 www.baidu.com
location.hostname 返回主机名
location.port 返回端口号 如果未填写返回 空字符串
location.pathname 返回路径
location.search 返回查询参数
location.hash 返回 片段 #后面内容 一般都是 链接中的锚点部分
location.protocol 返回协议 常见 http https
重点记住 href 和 search
通过href属性实现5秒后跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五秒之后自动跳转到百度</title> </head> <body> <div></div> <script> //2 显示倒计时秒数 var timer = 5; var div = document.querySelector('div'); setInterval(function () { if (timer == 0) { location.href = 'http://www.baidu.com'; } else { div.innerHTML = timer + '秒后跳转到百度'; timer--; } },1000) </script> </body> </html>
2）获取URL的参数
. 参数字符串格式 ?name=zs&age=100&sex=man
. 我们通过 location.query 可以得到 但是不太方便使用
. 我们需要自定义方法 把URL的search属性中的参数提起出来 变成json对象格式 {name:zs,age:100,sex:man}
. 这里面用到了一个 decodeURIComponent()函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取URL参数</title> </head> <body> <script> function urlArgs () { var args = {};//1 定义一个空对象 var query = location.search.substring(1);//2 取掉参数字符串的问号 var arr = query.split('&');//["name=zs", "age=100", "sex=man"] //split() 方法用于把一个字符串分割成字符串数组 //3 for循环遍历数组 for (var i=0; i<arr.length; i++) { var pos = arr[i].indexOf('='); //indexOf 返回指定字符 在字符串中第一次出现的索引 如果没有此字符 返回-1 if (pos == -1) { continue; } //如果没有找到就跳过 var name = arr[i].substring(0,pos);//提取name var value = arr[i].substring(pos+1);//提取value value = decodeURIComponent(value);//对value进行解码 args[name] = value;//存储为属性 } return args; } var pares = urlArgs(); console.log(pares.name) console.log(pares.age) </script> </body> </html>
二 操作URL地址
1）重定向页面
. location.assing('http://www.baidu.com'); 会增加历史记录 可以后退 可以回到前一页 window.location = "http://www.baidu.com"
location.href = "http://www.baidu.com"
它们两个都是隐式的调用了 location的assing()方法
2）替换当前页面
. location.replace('http://www.baidu.com') 不会增加历史记录 不能后退 不能回到前一页
3）重载当前页面
. location.reload(); 重新加载 可能从缓存中加载 [ 如果页面没有修改 可能从缓存中加载 ] 相当于按下了F5 或刷新按钮 . location.reload(true); 重新加载 强制从服务器加载 相当于按下了 Ctrl + F5
三 URL知识
1）概念
URL 统一资源定位符 它是WWW的统一资源定位标志，就是指网络地址
范例
// protocol://host[:port]/path/[?query]#fragment // 协议 主机名 端口 路径 请求参数 信息片段 // http://www.itcast.cn/index.html?name=andy&age=18#link
//. protocol：协议名称 常用http https ftp //. host： 主机名 [ip地址 或 域名 ] //. port： 端口号 省略使用方案的默认端口 HTTP的默认端口80 //. path： 路径 由0个或多个 / 符号隔开的字符串 用来表示主机上的一个目录或文件地址 //. query: 请求参数 以问号开头 以键值对形式 并用&分隔 //. fragment：片段 以#开头 后面内容见于链接锚点