js中的location对象和History对象

一、location对象

属性:

host 设置或检索位置或URL的主机名和端口号

hostname 设置或检索位置或URL的主机名

href 设置或检索完整的

location.hash = "#123"; // url: https://www.baidu.com/#123 
 
// 参数修改
location.search = "?wd=123" // url: https://www.baidu.com/?wd=location 会重新加载
 
// 修改host
location.hash = "www.bilibili.com"; // url:https://www.bilibili.com/ 页面会重新加载，跳转到bilibili
 
// 修改href
location.href = "https://www.bilibili.com/"; // url: https://www.bilibili.com 是否会跳转可想而知

方法：

assign（） 加载URL指定的新的html文档，可以后退

reload（） 重新加载当前页，页面刷新

replace（） 通过加载URL指定的文档来替换当前文档 ，没有后退功能

location.assign("https://www.bilibili.com");
可以后退回百度；
location.replace("https://www.bilibili.com");
无法后退；
 
// 正常重新加载
location.reload();
 
// 强制从服务器重新加载
location.reload(true);

二、History对象：有关客户访问过的URL的信息。

常用方法：back（）方法，加载History列表中的上一个URL，相当于后退按钮

                  forward（）方法，加载History列表中的下一个URL，相当于前进按钮

                  go（'url'or number）加载History列表中的一个URL或要求浏览器移动指定的页面数

                  go(1)代表前进1页，等价于  forward（）方法

                  go（-1）代表后退一页，等价于back（）方法
 

<input type="button" name="" id="btna" value="back" />
		<input type="button" name="" id="btnb" value="打开页面3" />
		<input type="button" name="" id="btnc" value="forwaid()" />
		<input type="button" name="" id="btnd" value="go" />
		<script type="text/javascript">
			btna.onclick=function(){
				history.back()//返回到上一个页面
			}
			btnb.onclick=function(){
				location.href="yemian3.html"//跳转到第三个页面
			}
			btnc.onclick=function(){
				history.forward()//跳转到历史访问（history）列表中的下一个页面
			}
			btnd.onclick=function(){
				history.go(-1)//去往指定的页面
			}
		</script>