location对象,navigator对象,history对象学习

location对象

一.什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。

二.URL的组成

统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般语法格式为︰
21fd663a472d43a2a388f688bcfb58f4.png

da2d500e8fb94853a96c846deca121e5.png 

三.location对象的属性

 e0dd4b4a127c4fa88c47ec7906454af5.png

 重点记住: href和search

location对象提供的search属性返回URL中的参数,通常用于在向服务器查询信息时传入一些查询条件,如页码,搜索关键字,排序方式等

四.五秒钟之后跳转页面

案例分析:

1.利用定时器做倒计时效果
2.时间到了,就跳转页面。使用location.href
104125ee27784ecf975e369680216ccd.png

五. 获取URL参数

1.第一个登录页面,里面有提交表单,action提交到index.html页面

9f5c0a1785444645b30505c3bd748b7b.png 

2.第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果第二个

3.页面之所以可以使用第一个页面的数据,是利用了URL里面的location.search参数

4.在第二个页面中,需要把这个参数提取。

5.第一步去掉?  利用substr

6.第二步利用=号分割键和值split( '= )
d6c73aaa21d74ddfaec40dfdc4a2f99b.png

效果图:

 4dfb91a3e38a425d9fd5294ad0c80d39.png

 

c2d934515812400ab0ed39465d0e44ed.png

 六.location常用方法

020824201bc546e9a2ad9e3303367289.png

assign ()方法是比较常用的方式,使用location. assign()就可以立即打开一个新的浏览器位置,并生成一条新的历史记录。接收的参数为 URL地址。

reload ()方法的唯一参数,是一个布尔类型值,将其设置为 true时,它会绕过缓存,从服务器上重新下载该文档,类似于浏览器中的刷新页面”按钮。

replace()方法的作用就是使浏览器位置发生改变,并且禁止在浏览器历史记录中生成新的记录,它只接受一个要导航到的URL参数,而且在调用 replace()方法后,用户不能返回到前一个页面。

64060923ccab4168ac4bec4e4b706f65.png

 navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转
0e374f38010b412d943bd1e0e2ad7fa3.png

 history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
1585096581dc4decbfdcb3f77dd22926.png

 c9aa1fdd23eb464aae8eccb590f4f463.png

 de356b82c1134bcfba8abb7b9924c3ff.png

 history对象一般在实际开发中比较少用,但是会在一些OA办公系统中见到。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值