当前位置：网站首页>Location、navigator和History对象
Location、navigator和History对象
2022-08-02 03:35:00 【呦呦鹿鸣[email protected]】
目录
1、location对象定义
window对象给我们提供了一个location属性用于获取或设置窗口的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
URL（Uniform Resource Locatiior）：统一资源定位符，是互联网上标准资源的地址。互联网上每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
2、location对象的属性
window.location对象可以不带window前缀书写
| location.href | 获取设置跳转url |
| location.host | 获取主机域名，www.baidu.com |
| location.port | 获取端口号，如果未写返回，空字符串 |
| location.pathname | 返回当前页面的路径或文件名 |
| location.search | 返回参数，比如：?id=1&name=zs |
| location.hash | 返回片段，#后面内容，常用于锚链接 |
| location.assign | 加载新文档 |
| location.protocol | 通信协议，常用的http，ftp,maito等 |
重点记住location.href 和 location.search这两个。 "?"可以通过字符串的形式去除
<input type="button" name="" id="btn" value="点击跳转到百度" />
<script>
var btn = document.querySelector('#btn');
btn.onclick = function(){
//获得的是本地的路径地址 注意 路径中有中文时 中文会通过urlcode加密处理
console.log(location.href);
location.href = 'http://www.baidu.com';
console.log(location.host);//获取域名
console.log(location.port);//获取 端口号
console.log(location.pathname);//获取路径
console.log(location.hash);//获取锚链接信息
}
</script>3、实例演练
5秒页面跳转练习
<button>发送</button>
<div></div>
<script>
var btn=document.querySelector('button');
var div=document.querySelector('div');
btn.addEventListener('click',function(){
//location.href='http://www.baidu.com';
var time=5;
setInterval(function(){
if(time==0){
location.href='http://www.baidu.com';
}else{
div.innerHTML='页面将在'+time+'秒钟后跳转到首页';
time--;
}
},1000)
})
</script>
获取页面参数数据
页面1
<!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>
<form action="2.html">
用户名<input type="text" name="username">
<input type="submit" value="登录">
</form>
</body>
</html>页面2
<!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>
<div></div>
<script>
console.log(location.search);//?name=
//先去掉？ 用substr('起始的位置'，截取几个字符)；
var shou=location.search.substr(1);
console.log(shou);
//利用=把字符串分割为数组 split('=');
var arr=shou.split('=');
console.log(arr);//输出是以数组形式['username', '1111']
var div=document.querySelector('div');
//把数据写入div中
div.innerHTML=arr[1]+'欢迎您';//arr[1]数组存的值是你输入的值1111
</script>
</body>
</html>
4、常见对象方法
| location.assign( ) | 可跳转页面（重定向页面） |
| location.replace( ) | 替换当前页面，不记录历史，无法后退 |
| location.reload( ) | 刷新页面f5, 参数为true为强制刷新ctrl+f5 |
<input type="button" name="" id="btn" value="点击页面跳转" />
<a href="javascript:;" onclick="getreplace()">跳转qn页面</a>
<a href="javascript:;" onclick="getreload()">点击刷新页面</a>
<script type="text/javascript">
// location方法
var btn = document.querySelector('#btn');
btn.onclick = function(){
//跳转页面
location.assign('http://www.baidu.com');
}
//跳转页面后 无法后退
function getreplace(){
location.replace('qn.html');
}
//刷新页面
function getreload(){
location.reload();
}
// navigator对象可以判断 登陆的类型 移动端 还是网页端
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
console.log("手机端");
} else {
console.log("PC端");
}
</script>5、navigator对象
navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
console.log("手机端");
} else {
console.log("PC端");
}6、history对象
window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。
| history.back( ) | 后退功能 |
| history.forward( ) | 前进功能 |
| go(参数） | 前进后退功能，如果是1，就前进一个页面；-1就后退一个页面 |
示例：
创建3个页面，第二个页面来实现前进和后退功能
history1页面
<!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>history1.html</title>
<style>
*{
padding:0px;
margin:0px;
}
div{
width:200px;
height:100px;
color:red;
border:1px solid purple;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div>我是history1.html页面</div>
<a href="history2.html">跳转到history2.html页面</a>
</body>
</html>history2页面
<!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>history2.html</title>
</head>
<body>
<a href="history3.html">history3.html</a>
<input type="button" name="" id="" value="后退一步" onclick="goback()">
<input type="button" name="" id="" value="前进一步" onclick="gofoward()">
<script>
//页面后退一步
function goback(){
//history.back();
history.go(-1);
}
//页面前进一步
function gofoward(){
//history.foward();
history.go(1);
}
</script>
</body>
</html>history3页面
<!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>history3.html</title>
</head>
<body>
<h2>我是history3.html页面</h2>
<script>
for(var i=0;i<5;i++){
for(var j=0;j<5-i;j++){
document.write('');
}
document.write('<br>');
}
</script>
</body>
</html>三个页面如图示：
操作过程先打开history1页面的超链接到2页面，在通过2页面的超链接跳转到3页面；再通过浏览器窗口的后退键退回到2页面窗口。这是通过2页面的前进和后退按钮来实现跳转页面的功能。
版权声明
本文为[呦呦鹿鸣[email protected]]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_53841687/article/details/125581461
边栏推荐
猜你喜欢
随机推荐
只出现一次的字符
剑指Offer 32.Ⅰ从上到下打印二叉树
Basic IO (on): file management and descriptors
HAL库笔记——通过按键来控制LED（基于正点原子STM32F103ZET6精英板）
QT+OPENCV+FFTW内存问题
笔记本电脑充电问题
CC1101魔幻的收发切换机制
UKlog.dat和QQ,微信文件的转移
剑指Offer 35.复杂链表的复制
学习（三）：事件的订阅与发布
剑指Offer 04.二位数组中的查找 线性查找
4个不可不知的“安全左移”的理由
两端是圆角的进度条微信对接笔记
PHP将字符切割成每个拼音
flasgger手写phpwind接口文档
未来智安创始人兼CEO唐伽佳荣膺36氪X·36Under36 “S级创业者”
OpenSSF安全计划：SBOM将驱动软件供应链安全
KMP 字符串匹配
音视频文件码率与大小计算
如何将 DevSecOps 引入企业？