location 对象是 window 对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
URL 统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
组成 | 说明 |
---|---|
protocol | 通信协议 常用的http,ftp,maito等 |
host | 主机(域名)www.baidu.com |
port | 端口号 可选,省略时使用方案的默认端口 如http的默认端口为80 |
path | 路径 由 零或多个‘/’符号隔开的字符串,一般用来表示主机上的一个目录或文件地址 |
query | 参数 以键值对的形式,通过&符号分割开来 |
fragment | 片段 #后面内容 常见于链接 锚点 |
location对象的属性
location对象属性 | 返回值 |
---|---|
location.href | 获取或者设置 整个URL |
location.host | 返回主机(域名)www.baidu.com |
location.port | 返回端口号 如果未写返回 空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 #后面内容 常见于链接 锚点 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>click</button>
<span></span>
<script>
// location.href
// var btn = document.querySelector('button');
// var span = document.querySelector('span');
// btn.addEventListener('click', function() {
// // console.log(location.href);
// location.href = 'http://www.baidu.com'
// })
// 倒计时 5 秒跳转页面
// setInterval(time, 1000);
// var second = 5;
// function time() {
// if (second == 0) {
// location.href = 'http://www.baidu.com'
// }
// span.innerHTML = '再等' + second + '秒跳转页面';
// second--;
// }
// location.search 获取URL参数数据
// var btn = document.querySelector('button');
// var span = document.querySelector('span');
// btn.addEventListener('click', function() {
// // console.log(location.search);
// var names = location.search.split('=');
// console.log(names);
// span.innerHTML = names[1]
// });
// location.assign() | location.replace() | location.reload()
var btn = document.querySelector('button');
var span = document.querySelector('span');
// btn.addEventListener('click', function() {
// 记录浏览器历实,具有后退功能
// location.assign('http://www.baidu.com');
// 不记录浏览器历实,没有后退功能
// location.replace('http://www.baidu.com');
// 重新加载页面,相当于刷新按钮或者F5, 如果参数为 true 强制刷新 ctrl + F5
// location.reload(true);
// });
</script>
</body>
</html>
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
if ((navigator.userAgent.match(/(phone|pad|pod|iphone|ipod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennce|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phoone)/i))) {
window.location.href = ''; // 手机
} else {
window.location.href = ''; // 电脑
}
</script>
</body>
</html>
history对象与浏览器历实记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
// window.history
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.forward(); 前进
// history.back(); 后退
// history.go(); 参数 1 前进一个页面, -1 后退一个页面
})