BOM——location、history方法使用

网址分析

https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1
http https 传输协议
www.baidu.com 域名
?fr=aladdin 查询字符
#2_1 hash(锚点定位)

location对象

里面存储了和网页地址所有内容有关的信息。

属性

href:地址信息。
跳转页面:location.href = “跳转网址”;

 		window.onload = function() {
            btn.onclick = function recode() {
            	//跳转到新网页
                location.href = "https://www.baidu.com";
            }
        }

search:查询字符串 一般是用于传输数据,需要进行解析。

		var search = location.search;
            alert(search);

在这里插入图片描述
【注意】location.href需要等页面加载完后再调用。

split(分割字符串)
返回值:分割好的字符串组成的数组: 苏轼|辛弃疾|李商隐 =》[苏轼,辛弃疾,李商隐]
解析查询字符(网址中从?开始之后的成为查询字符)
1.查询字符为空
在这里插入图片描述

2.查询不为空
在这里插入图片描述
步骤:
1.需要准备一个函数进行解析,这个函数还需要一个参数。
参数:要解析的字符串
2.开始解析
1.判断如果为空字符串,直接返回 空对象。
2.如果不是空字符串,解析字符串,并将结果放入对象中。
(1)截取掉第一个字符。
(2)剩余字符按照&进行分割,得到一个数组。
(3)遍历数组,得到 “属性名=属性值”这样格式的字符串。
(4)对每一个字符串,按照=分割,得到一个属性和属性值组成的数组。
(5)将属性名和属性值赋值给对象 //obj[t[0]]=t[1];
(6)返回对象。

		window.onload = function() {
              var objj = resolverSearch(location.search);
              console.log(objj);
              console.log(objj.name);
              console.log(objj.age);
              function resolverSearch(search) {
                  var obj = {};
                  if (search) {
                  //返回从?之后的地址,并通过以字符串中"&"的位置,分割的方式形成一个新的数组
                      var tmp = search.slice(1).split("&");
                      console.log(search);
					//遍历tmp数组中的所有元素
                      for (key in tmp) {
                      	//tmp数组中的每一个元素通过以字符串中"="的位置,分割的方式形成一个新的数组
                          var t = tmp[key].split("=");
                          //利用对象新增属性,对obj添加属性以及属性值
                          obj[t[0]] = t[1];
                      }
                  }
                  return obj;
                }
         }

在这里插入图片描述

方法:
assign():改变浏览器地址栏中的地址,并记录到历史中。

location.assign("https://www.baidu.com");

【注意】设置location.href 就会调用assign方法。
replace() 替换浏览器地址栏中的地址。(但它载入新文档之前会从浏览历史中把当前文档删除)

location.replace("https://www.baidu.com");

reload() 重新加载 F5

//2秒之后自动刷新
setInterval("location.reload()", 2000);

reload()只有一个参数,是一个布尔类型的值,为true时, 强制加载,会绕过缓存,从服务器上重新加载,下载该文档。

navigator

获取浏览器客户端的一些信息。

history

保存当前窗口的历史记录 ,里面包含了一些操作历史记录的属性和方法
【注意】不是浏览器中的历史记录
1.属性
length:返回历史记录的条数。

 		window.onload = function() {
 			//点击按钮调用函数
            btn.onclick = function recode() {
            //打开新网页
                location.href = "https://www.baidu.com";
                //弹出警告框显示当前网页的浏览历史记录
                alert(history.length);
            }
        }
<button id="btn">历史记录</button>

2.方法:
back():
语法:history.back();
作用:类似浏览器上面的后退键,回退到上一条历史记录中。
forward():
语法:history.forward();
作用:类似浏览器上面的前进键,前进到下一条历史记录中。
go(n):
语法:history.go(n); n表示整数
正整数:表示前进
0:刷新当前页面
负整数:表示后退
作用:跳转n条记录记录。
当页面的宽高比较大时,会出现滚动条,一部分内容会随着页面的滚动而被隐藏。
我们管上面隐藏的叫做 卷去的高度
左边隐藏的宽,叫做卷去的宽度。
三个页面a、b、c
a页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
        	
            btn.onclick = function() {
                history.forward();
            }
        }
    </script>
</head>

<body>
    <p>我是a页面</p>
    <a href="b.html">跳转到b页面</a>
    <button id="btn">前进</button>
</body>

</html>

b页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            btn.onclick = function() {
                history.forward();
            }
            btn2.onclick = function() {
                history.back();
            }

        }
    </script>
</head>

<body>
    <p>我是b页面</p>

    <a href="c.html">跳转到c页面</a>
    <button id="btn">前进</button>
    <button id="btn2">后退</button>
</body>

</html>

c页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            btn2.onclick = function() {
                history.back();
            }
            btn.onclick = function() {
            	//获取a页面到c页面的总浏览器记录,要从c页面返回到a页面(首页)反向即go(负值)
            	//a页面到c页面三条浏览记录,但是从c页面返回到首页只需后退两天记录
                var num = -(history.length - 1);
                history.go(num);
            }
        }
    </script>
</head>

<body>
    <p>我是c页面</p>

    <button id=btn>返回首页</button>
    <button id="btn2">后退</button>
</body>

</html>

【解析】**首先从a页面跳转到b页面,然后从b页面跳转到c页面,是在网页a页面的基础上进行的,所以history(浏览历史记录)是对当前网页a页面而言。**要想使前进、后退键启用,必须要先有浏览记录,a页面跳转到b页面,a页面前进按钮与b页面的后退按钮才有用;同理:b页面要先跳转到c页面,b页面的前进按钮与c页面的后退按钮、返回首页按钮才有用

浏览器卷曲的高度、宽度

document.documentElement.scrollTop
获取卷去的高度 使用时页面中必须要有DOCTYPE标签。
document.body.scrollTop
获取卷去的高度,使用时,页面中没有DOCTYPE标签。
document.documentElement.scrollLeft
获取卷去的宽度 使用时页面中必须要有DOCTYPE标签,并且必须要对body设置宽度才会生效
兼容写法:
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
可以通过js代码来指定浏览器滚动到什么位置上。

第一种方式:
格式:window.scroll(横坐标,纵坐标);
【注意】不需要书写单位,瞬间定位。

第二种方式:
window.scroll({
left:200,
top:600,
behavior:‘smooth’
});
behavior:可以决定滚动的方式,默认为 auto 瞬间定位,可以设置为smooth 平滑过渡。

自定义滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var timer = null;
        window.onload = function() {
            btn.onclick = function() {
                // 设置一个定时器,让页面往上滚动
                timer = setInterval(function() {
                    // 浏览器卷去的高度每次减少20px;
                    document.documentElement.scrollTop -= 20;
                    if (document.documentElement.scrollTop <= 0) {
                        clearInterval(timer);
                    }
                }, 50);
            }
        }
        var st = 0;
        // 当用户向相反的方向滚动页面,计时器应该停止。
        // 当页面滚动时,执行。
        window.onscroll = function() {
            // console.log(document.documentElement.scrollTop);
            // 一旦本次滚动时得到的高度比上一次滚动时得到的高度要大时,说明反方向移动,应该停止计时器.
            if (st <= document.documentElement.scrollTop) {
                clearInterval(timer);
            }
            // 记录上一次的位置
            st = document.documentElement.scrollTop;

        }
    </script>
</head>

<body>
    <p>三十功名尘与土,八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土,八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土,八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土,八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土,八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土,八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button id="btn">回到顶部</button>
</body>

</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值