【你也能从零基础学会网站开发】Web建站之javascript入门篇 History对象与Location对象

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

History历史对象

对象介绍属于window的子对象, 常用于返回到已经访问过的页面!

常见方法如下表:

方法	功能说明
history.length	历史记录数
history.back()	返回上一页
history.forward()	前进一页
history.go()	前进或后退num页，num为0时表示页面刷新

举个栗子

<input type="button" value="返回" onclick="history.back()">
<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="刷新" onclick="history.go(0)">

相当于:

小知识

有时候，需要从一个页面直接跳到另一个页面。
此时可以通过调用history对象的go方法来实现，该方法可以直接跳转到某个历史URL。
例如以下代码可以跳转到地址列表中编号为当前位置减n的地址所指的页面。
语法: history.go(n)
当n>0时，装入历史表中的往前数的第n个页面；n=0时装入当前页面；n<0时，装入历史表中往后数的第n个页面。

另一种更为直接的跳转方法是使用地址对象，设置地址对象的location属性即可打开指定的地址卸载文档。

如图

举个栗子

<script>
  //指定秒数
  var scnds = 5;
  function Go(){
      var info = document.getElementById('info');
      --scnds;
      if(scnds==0){
          window.location.href="https://www.baidu.com";
      }else{
          info.innerHTML='浏览器将在'+scnds+'秒以后自动跳转到百度!';
      }
  }
  //定时器
  setInterval(Go,1000);
</script>

<h2 id="info"></h2>

history对象其主要作用是用来跟踪窗口中曾经使用的URL，由document对象的history属性保持引用。通过使用history对象可以获知浏览器窗口近来访问过的网页个数，还可以实现从一个页面跳到另一个页面，在实际应用中，如涉及到页面的跳转问题，可以用这个对象来解决 , 前进到上一页和后退到下一页使用history对象的back和forward方法，可以实现和浏览器提供的后退和前进功能。

例如:

history.back() 
history.forward()

Location对象

属于window的子对象,常用于获取和改变当前浏览的网址

Location对象常用的属性:

href 	             	当前窗口正在浏览的网页地址
replace(url)		转向到url网页地址
reload()			重新载入当前网址，同按下刷新按钮

我们可以获取Location对象的所有属性看看!

例如:

var showtext = "Location对象属性列表：<br>";
 for (var propname in location) {
     showtext += propname + ": " + location[propname] + "<br>";
 }
 document.write(showtext);

如图

URL小知识

URL也就是路径地址的意思，在网页中指的是访问的路径。

它的构成是有一定的规范的，通常情况下，一个URL会有下面的格式：

协议（//）+主机:端口（/）+路径名称（#）+哈希标识(?)+搜索条件。

这些部分是满足这样的要求的：

协议是URL的起始部分，直到包含到第一个冒号
主机描述了主机和域名，或者一个网络主机的IP地址
端口描述了服务器用于通讯的通讯端口路径名称描述了URL的路径方面的信息

哈希标识描述了URL中的锚名称，包括哈希掩码(#)。此属性只应用于HTTP的URL
搜索条件字符串包含变量和值的配对,每对之间由一个&连接。

获取指定地址的各属性值

通常在网页编程时，会涉及对地址的处理的问题，如页面间的参数传递等，这些都与地址本身的一些属性有关。

这些属性大多都是用来引用当前文档的URL的各个部分。

举个栗子

with(document){
     var url = window.location.href
     write("地址协议："+location.protocol+"<br/>")
     write("主机名："+location.hostname+"<br/>")
     write("商品号："+location.host+"<br/>")
     write("路径名："+location.pathname+"<br/>")
     write("整个地址："+url+"<br/>")
 }
 document.write(showtext);

如图

加载新网页

在网页设计过程中，时常会用到加载一个新的网页的情况。

这时仍然可以用Location对象。它的href属性就可以轻松完成这一功能，该属性返回值为当前文档的URL，如果将该属性值设置为新的URL，那么浏览器会自动加载该URL的内容，从而达到加载一个新的网页的目的。

如图

装载新文档与重新装入当前文档

文档的装载在应用中也是比较常见的，然而它的装方式一共就三种,

即assign、replace、reload这三个方法。

其中reload方法用于根据浏览器reload按钮定义的策略重新装入窗口的当前文档。

replace方法取一个URL参数,从当前文档历史清单中装入URL,并显示指定页面。

代码


<script>
function Assign() {
     location.assign("https://www.baidu.com");//加载一个新文档,和location对象的href属一样
 }

 function Replace() {
     location.replace("https://mail.163.com");//使用新的URL替换当前文档，不加入到浏览器的历史中
 }

 function Reload() {
     location.reload("https://www.google.cn/");// 重新载入当前文档，有一个bool参数
 }
</script>

<div onClick="Assign()">前往百度首页</div>
<div onClick="Reload()">163邮箱登录</div>
<div onClick="Reload()">前往google首页</div>