javascript history对象(历史记录)使用方法(实现浏览器前进后退)

window.history对象在编写时可不使用 window 这个前缀。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

方法：

history.back() - 加载历史列表中的前一个URL，这与在浏览器中点击前进按钮是相同的
history.forward() - 加载历史列表中的下一个URL，这与在浏览器中点击前进按钮是相同的

实例:

代码如下:

<html>
<button name="back" value="后退" onclick="goBack()">后退</button>
<button name="forward" value="前进" onclick="goForward()">前进</button>
<script type="text/javascript">
function goBack(){
        history.back();        
}
function goForward(){
        history.forward();     
}      
</script>
</html>

其他方法:

代码如下:

history.go(0);//刷新当前页面
//以下是要在浏览器中有历史记录的,否则不会有效果.
history.go(1);//前进一页
history.go(-1);//后退一页
history.go(-2);//后退两页
history.length;//当前窗口包含的历史记录条数

赞 (0)

相关推荐

  • js history对象简单实现返回和前进

    返回和前进用到的是DOM中的history对象: 返回: 复制代码 代码如下: <a href="javascript:history.go(-1)">返回</a> //相当于调用history对象的back()方法: 前进: 复制代码 代码如下: <a href="javascript:history.go(1)">前进</a> //相当于调用history对象的forword()方法:

  • JavaScript编程中window的location与history对象详解

    Window Location window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. window.location 对象在编写时可不使用 window 这个前缀. 一些例子: 一些实例: location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 (80 或 443) location.protocol 返回所使用的 web 协

  • JavaScript入门教程(7) History历史对象

    鉴于安全性的需要,该对象收到很多限制,现在只剩下下列属性和方法.History历史对象有length这个属性,列出历史的项数.JavaScript 所能管到的历史被限制在用浏览器的"前进""后退"键可以去到的范围.本属性返回的是"前进"和"后退"两个按键之下包含的地址数的和. History历史对象并有以下方法 back() 后退,跟按下"后退"键是等效的. forward() 前进,跟按下"前进

  • javascript:history.go()和History.back()的区别及应用

    复制代码 代码如下: <input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input t

  • javascript history对象详解

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进.本文将详细介绍BOM中的history对象 length history.length属性保存着历史记录的URL数量.初始时,该值为1.如果当前窗口先后访问了三个网址,history.length属性等于3 由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用 histor

  • JavaScript的History API使搜索引擎抓取AJAX内容

    JavaScript的History API使搜索引擎抓取AJAX内容

    大家在浏览Facebook的相册时有没有发现,页面局部刷新的同时地址栏的地址也改变了,而且不是hash的方式.它使用的就是HTML5 history新增的几个API,作为window的一个全局变量,在HTML4的时代history已不是什么新鲜的事物了.我们经常使用的就有 history.back()以及history.go() . 我一直以为没有办法做到,直到前两天看到了Discourse创始人之一的Robin Ward的解决方法,不禁拍案叫绝. Discourse是一个论坛程序,严重依赖Aj

  • javascript SocialHistory 检查访问者是否访问过某站点

    window.onload = function() {     var sl = new SocialHistory();     alert(sl.doesVisit("www.jb51.net")); } 如果用户曾经使用过www.jb51.net,那么该函数就会返回真,否则返回假. 其实原理并不复杂,它利用了链接的 a:visited 伪类的属性.首先在页面上生成一个iframe,并在这个iframe中设置 a 和 a:visited 为不同的样式.然后将网站的链接插入到 if

  • js判断当页面无法回退时关闭网页否则就history.go(-1)

    在做一个Web项目时遇到一个需求,当页面没有前驱历史记录时(就是当前为新弹出的页面,没法做goback操作即history.go(-1)),点击返回按钮时直接关闭页面,否则就退回到前一页. 遇到的问题就是如何判断 是否有history可以回退,这个非常麻烦,因为没有这样的函数直接能获取到,只能通过history.length这个变量做变通的处理,但是对于IE,和非IE的length的返回值不同,ie: history.length=0, 非IE的为1,因此写了一个函数实现前面所需求的这个功能.分

  • JavaScript中的History历史对象

    JavaScript中的History历史对象包含了用户已浏览的 URL 的信息,是指历史对象指浏览器的浏览历史.鉴于安全性的需要,该对象收到很多限制,现在只剩下下列属性和方法.History历史对象有length这个属性,列出历史的项数.JavaScript 所能管到的历史被限制在用浏览器的"前进""后退"键可以去到的范围.本属性返回的是"前进"和"后退"两个按键之下包含的地址数的和. History历史对象并有以下方法 b

  • javascript history对象(历史记录)使用方法(实现浏览器前进后退)

    window.history对象在编写时可不使用 window 这个前缀.为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制. 方法: history.back() - 加载历史列表中的前一个URL,这与在浏览器中点击前进按钮是相同的history.forward() - 加载历史列表中的下一个URL,这与在浏览器中点击前进按钮是相同的 实例: 复制代码 代码如下: <html><button name="back" value="后退&

  • javascript History对象原理解析

    这篇文章主要介绍了javascript History对象原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 length history.length属性保存着历史记录的URL数量.初始时,该值为1.由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用 跳转方法 go().back()和forward() 如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是静默失败 [注意]使用历史记录时,页面通常从浏览器缓存之

  • JavaScript history 对象详解

    JavaScript history 对象详解

    目录 1.路由导航 2.历史状态管理API (1)hashchange 事件 (2)popstate 事件 (3)history.pushState() 方法 (4)history.replaceState()方法 3.补充:URL的hash 前言: 我们浏览一个网页时可能不太会注意网页前进后退这些操作,但是在开发时你是否想过页面之间的跳转经历了什么,浏览器时怎么保存的页面信息,重新返回上一个页面的时候是否需要重新加载页面呢,会有很对疑问,要想解决这些问题,首先需要知道浏览器中的window下的

  • javascript RegExp 对象属性与方法和应用

    JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例.有两种方式可以创建RegExp对象的实例. 使用RegExp的显式构造函数,语法为:new RegExp("pattern"[,"flags"]). 使用RegExp的隐式构造函数,采用纯文本格式:/pattern/[flags]. pattern部分为要使用的正则表达式模式文本,是必须的.在第一种方式中,pattern部分以JavaScri

  • JavaScript Array对象扩展indexOf()方法

    背景:JavaScript中Array对象的标准方法中,没有indexOf()方法,可通过下面的代码扩展. 复制代码 代码如下: if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) :

  • 通过实例解析javascript Date对象属性及方法

    日常生活中,各种形式的时间字符到处都是.时间观念的产生,时间单位.计时工具的发明,给人类带来的变化实在一言难尽.今天就来谈谈日期那些事儿.一起来看看 JavaScript 中的日期对象 Date. 获取月份天数 // 获取月份天数 function getMonthDayCount(year, month) { return new Date(year, month, 0).getDate(); } console.log(getMonthDayCount(2017, 10)); // 31 D

  • Javascript 日期对象Date扩展方法

    今天在网上摘抄了些js中操作日期的相关方法,现在与大家分享一下. 复制代码 代码如下: <script type="text/javascript"> Date.prototype.Format = function(fmt) { //author: meizz var o = { "M+" : this.getMonth() + 1, //月份 "d+" : this.getDate(), //日 "h+" :

  • JavaScript字符串对象的concat方法实例（用于连接两个或多个字符串）

    JavaScript concat 方法 concat 方法连接两个或多个字符串,其语法如下: 复制代码 代码如下: str_object.concat(str1, str2, ...) str_object 是需要连接的第一个字符串(对象),str1 是需要连接的第二个字符串,str2 是需要连接的第三个字符串,依次类推,至少需要一个str1. concat 实例 复制代码 代码如下: <script language="JavaScript"> var str = &q

  • 浅析JavaScript访问对象属性和方法及区别

    属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸.跳跃等. 在JavaScript中通常使用"."运算符来存取对象的属性的值.或者使用[]作为一个关联数组来存取对象的属性. 对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中,可以使用" . "和" [ ] "来访问对象的属性. 1. 使用" . "来访问对象属性 语法: objectNam

随机推荐