17、location对象
1. 什么是 location 对象
![1551322091638](https://i-blog.csdnimg.cn/blog_migrate/7b7e1405462da84ccf8c9d3e2826cdf9.png)
2.URL
![1551322373704](https://i-blog.csdnimg.cn/blog_migrate/f1cfea1e90f60ccb5e349560bb731195.png)
![1551322387201](https://i-blog.csdnimg.cn/blog_migrate/c3d8b2af2569b83694699dfbe1dda7e2.png)
<body>
<form action="index.html">
用户名: <input type="text" name="uname">
<input type="submit" value="登录">
</form>
<script>
console.log(location.search);
var params = location.search.substr(1);
console.log(params);
var arr = params.split('=');
console.log(arr);
var div = document.querySelector('div');
div.innerHTML = arr[1] + '欢迎您';
</script>
</body>
3. location 对象的属性
![1551322416716](https://i-blog.csdnimg.cn/blog_migrate/52ad195db1844e0ac66e9b048fcb6348.png)
![1551322438200](https://i-blog.csdnimg.cn/blog_migrate/40cd35ea523d5a4f328dc3dc89ae2939.png)
4. 案例:5分钟自动跳转页面
![1551322496871](https://i-blog.csdnimg.cn/blog_migrate/0c74278fbb764782f425146b1e77dd61.png)
![1551322517605](https://i-blog.csdnimg.cn/blog_migrate/7f4a3f325512ed46a47b6f086cb0d4e4.png)
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
location.href = 'http://www.itcast.cn';
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.itcast.cn';
} else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
timer--;
}
}, 1000);
</script>
5. 案例:获取URL参数
![1551322622640](https://i-blog.csdnimg.cn/blog_migrate/8a7d83b6c04d3674833e179fb42b0ccc.png)
![1551322639241](https://i-blog.csdnimg.cn/blog_migrate/c868deac3ede896ee119fcd44755fc3e.png)
<div></div>
<script>
console.log(location.search);
var params = location.search.substr(1);
console.log(params);
var arr = params.split('=');
console.log(arr);
var div = document.querySelector('div');
div.innerHTML = arr[1] + '欢迎您';
</script>
6. location对象的常见方法
![1551322750241](https://i-blog.csdnimg.cn/blog_migrate/af3ec89777c1229c469d1d663cee2270.png)
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
location.reload(true);
})
</script>