BOM - history与search处理 / 开普饭

什么是history对象?

我们还是先来看一下这张图

我们之前给大家说过，我们的window对象是整个浏览器

history是window的对象属性，它的作用是保存用户上网的记录

在我们的浏览器中它代表的是这一块区域：

history.length 返回当前history对象中记录数

历史记录的条数

举个小例子：

运行结果如下，点击按钮会显示1：

因为我们只加载了一个页面

我们做这样一个操作，在地址栏后面加上#，分别运行#1，#2，#3

这样就变成了4条

以上是history的属性

history的方法：

1.history.back(); 返回上一条历史记录，类似于后退

2.history.forward(); 前进到吓一跳历史记录，类似前进

3.history.go(); 转到

我们用实例来看一下三个方法的使用：

<head><metacharset="utf-8"><title></title><script>window.onload =function(){var oBtn = document.getElementById("btn"); oBtn.onclick= function(){ alert(history.length) }var oForward = document.getElementById("forward") oForward.onclick= function(){ history.forward(); }var oBack = document.getElementById("back") oBack.onclick = function(){ history.back(); }var oGo =document.getElementById("go") }</script></head><body><input type="button" value="记录"id="btn" /><input type="button" value="前进"id="forward" /><input type="button" value="后退"id="back" /><input type="button" value="go"id="go" /></body>

运行结果，

我们给地址栏中添加#1，#2，#3分别跳转，此时点击前进后退按钮，就会在123直接跳转

那么history.go(); 是干什么用的呢？

重点是在它的参数：

0 重载当前页面

正数前进对应数量的记录

负数后退对应数量的记录

接着上面的例子：

var oGo = document.getElementById("go")oGo.onclick = function(){ history.go( 0 );}

//刷新当前页面

var oGo = document.getElementById("go")oGo.onclick = function(){ history.go( 2 );}

//就会转到#2页面

var oGo = document.getElementById("go")oGo.onclick = function(){ history.go( -2 );}

//往回跳两个页面

search处理

?id=5&search=ok

获取url中search，通过传入对应的key，返回key对应的value值

例如：传入id，返回5

（通过key找到value；通过id找到5）

<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <script> function getValue(search,key){ //1.找出key第一次出现的位置 var start = search.indexOf(key); if(start == -1){ return; }else{ //2.说明找到了，找出键值对。结束的位置 var end = search.indexOf("&",start); if(end == -1){ //这是最后一个键值对 end = search.length; } } //3.将这个键值对提取出来 var str = search.substring(start,end); //4.key=value 获取value var arr = str.split("="); return arr[1]; } var search = "?id=5&search=ok"; alert(getValue(search,"id"));</script> <body> </body></html>

运行结果如下：

如果getValue(search,”id”); 返回5

如果getValue(search,”search”); 返回ok

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web

BOM - history与search处理

相关推荐