JS之BOM篇-location对象
location对象提供当前窗口所加载文档的相关信息，它既是window对象的属性，也是document对象的属性，它也可以单独使用
属性
location将URL解析成独立的片段，让开发人员可以通过不同的属性访问这些片段
URL： http://127.0.0.1:3030/index?limit=10&page=1#one
| 属性名 | 例子 | 说明 |
|---|---|---|
| hash | #one | 哈希值：#号后面的字符串（包含#号），如果URL中不包含散列则返回空字符串 |
| host | 127.0.0.1:3030 | 主机地址：主机名加端口号（如果有端口号） |
| hostname | 127.0.0.1 | 主机名 |
| href | http://127.0.0.1:3030/index?limit=10&page=1#one | 当前页面的完整URL |
| origin | http://127.0.0.1:3030 | 服务器源：包含协议、主机名和端口号 |
| pathname | /index | 路径名称：目录和文件名（如果有文件名） |
| port | 3030 | 端口号：如果没有则返回空字符串 |
| protocol | http: | 协议：通常是http:或https: |
| search | ?limit=10&page=1 | 查询字符串：?号后面的字符串（包含?号） |
如果URL中?之前有一个#，比如'#one?limit=10'，那么location.search得到的就是空字符串，因为location.search只能取到'?'后面和'#'前面的内容
虽然location.search返回从问号到URL末尾的所有内容，但却没有办法逐个访问其中的每个查询字符串参数。下面创建一个通用函数，返回包含所有属性的一个对象，并能够解析参数:
function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
hash: a.hash.replace('#', ''),
host: a.host,
hostname: a.hostname,
href: url,
origin: a.origin,
pathname: a.pathname,
port: a.port,
protocol: a.protocol.replace(':', ''),
search: a.search,
params: (function() {
var ret = {},
seg = a.search.replace(/^\?/, '').split('&'),
len = seg.length,
i = 0,
s;
for (; i < len; i++) {
if (!seg[i]) {
continue;
}
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
segments: a.pathname.replace(/^\//, '').split('/')
};
}
console.log(parseURL('http://127.0.0.1:3030/index/list/test.html?limit=10&page=1#one'))
方法
assign()
assign()方法接收一个URL作为参数，该方法可以立即打开新URL，并在浏览器历史记录中生成一条记录。如果将location.href或window.location设置为一个URL值，相当于调用assign()方法。
location.assign('https://www.86886.wang');
window.location = 'https://www.86886.wang';
document.location = 'https://www.86886.wang';
location.href = 'https://www.86886.wang';
每当修改location的属性(hash除外)，页面都会以新URL重新加载
<button id="btn">按钮</button>
<script>
btn.onclick = function() {
location.search = '?page=2'
location.pathname = '/index'
}
</script>
replace()
replace()方法也接收一个URL作为参数，但是新URL不会在浏览器中生成新的历史记录，也就是说用户不能回到前一个页面
location.replace('https://www.86886.wang')
reload()
reload()方法用于重新加载当前显示的页面。如果调用reload()方法时不传递任何参数，页面会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要传递参数true
<button id="btn">按钮</button>
<script>
btn.onclick = function() {
// 从服务器重新加载
location.reload(true)
}
</script>
事件
HTML5新增了hashchange事件，hash值变化时会触发该事件。这个事件可以让开发人员更方便的根据hash变化，在Ajax应用中动态请求数据。在使用时，必须把hashchange事件添加给window对象，当hash值变化时，事件对象额外包含了oldURL和newURL两个属性，这两个属性分别保存着参数列表变化前后的完整URL
<style>
body {
padding: 0;
margin: 0;
height: 2500px;
}
#one {
width: 100%;
height: 800px;
background: teal;
}
#two {
width: 100%;
height: 1000px;
background: pink;
}
#three {
width: 100%;
height: 300px;
background: red;
}
</style>
<body>
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
window.onhashchange = function(e) {
console.log(e.type, e.newURL, e.oldURL)
}
// hashchange http://127.0.0.1:3030/#one http://127.0.0.1:3030/
</script>
注意： IE浏览器不支持事件对象新增的oldURL和newURL这两个属性，兼容方案如下
(function(w){
if(!w.HashChangeEvent){
var lastURL=document.URL;
w.addEventListener("hashchange",function(e){
var oldURL=lastURL;
var newURL=document.URL;
lastURL=newURL;
Object.defineProperties(e,{
oldURL:{enumerable:true,configurable:true,value:oldURL},
newURL:{enumerable:true,configurable:true,value:newURL}
});
});
}
}(window));
window.onhashchange = function(e) {
console.log(e.type, e.newURL, e.oldURL)
}
// hashchange http://127.0.0.1:3030/#one http://127.0.0.1:3030/
