History 对象
history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。
窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。

语法:

window.history.[属性|方法]
//window可以省略。

History 对象属性

History 对象方法

使用length属性,当前窗口的浏览历史总长度,代码如下:

 <script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

返回前一个浏览的页面
back()方法,加载 history 列表中的前一个 URL。

语法:

window.history.back();

比如,返回前一个浏览的页面,代码如下:

window.history.back();
//注意:等同于点击浏览器的倒退按钮。

back()相当于go(-1),代码如下:

window.history.go(-1);

例:

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
window.history.back();
}
</script>
</head>
<body>
点击下面的锚点链接,添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮,实现返回前一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
</form>
</body>
</html>

返回浏览历史中的其他页面
go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面。

语法:

window.history.go(number);

参数:
  1  --- 前一个,go(1)等价forward()
  0  --- 当前页面
  -1 --- 后一个,go(-1)等价back()
  其他数值 --- 要访问的URL在history的URL列表中的相对位置。

浏览器中,返回当前页面之前浏览过的第二个历史页面,代码如下:

window.history.go(-2);

和在浏览器中单击两次后退按钮操作一样。
同理,返回当前页面之后浏览过的第三个历史页面,代码如下:

window.history.go(3);

例:

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
history.go(-1);
} function GoForward() {
history.go(2);
}
</script>
</head>
<body>
点击下面的锚点链接,添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮,实现返回前或下一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
<input type="button" value="返回下一个页面" onclick="GoForward();" />
</form>
</body>
</html>
 
 

Javascript进阶篇——浏览器对象—History对象的更多相关文章

  1. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  2. 二、JavaScript语言--JS基础--JavaScript进阶篇--浏览器对象

    1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法:

  3. Javascript进阶篇——浏览器对象—Location、Navigator、userAgent、screen对象

    Location对象location用于获取或设置窗体的URL,并且可以用于解析URL.语法: location.[属性|方法] location对象属性图示: location 对象属性: loca ...

  4. Javascript进阶篇——浏览器对象—JavaScript计时器

    ---恢复内容开始--- JavaScript 计时器在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.计时器类型:一次性计时器:仅在指定的延迟时间之后触 ...

  5. JS window对象 History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。语法: window.history.[属性|方法]

    History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都 ...

  6. #笔记#JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  7. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  8. 【叔小生】JavaScript进阶篇

    如何插入JS JS基础语法 语法.函数.方法 提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符. <!DOCTYPE HTML> & ...

  9. JS BOM对象 History对象 Location对象

    一.BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作 window对象 所有浏览器都支持 window 对象. 概念上讲.一个html文档对应一个window对象. 功能上讲: 控 ...

随机推荐

  1. 什么是automatic variable?

    看代码符号$?搞不清楚是什么?   看代码. $share = Get-WmiObject -Class Win32_Share -ComputerName $Server.name -Credent ...

  2. php入门变量之变量的间接引用、连接字符串和连接赋值运算符

    [1]变量的间接引用: <?php $a = 'b'; $$a = '123'; echo $b; ?> 上面的输出结果是123 我们可以看到在第二行代码中多了一个$,并通过指定的名称访问 ...

  3. tomcat集群部署

    1.apache只有处理静态事物的能力, 而tomcat的强项就是处理动态的请求 2.由apache作为入口,如果是请求静态页面或者是静态文件,由apache直接提供,如果是请求动态页面,则让apac ...

  4. Java read()和readLine()的区别

    1.read() 功能:读取单个字符的个数,如果已经读完的话会返回-1 (其范围从 0 到 65535 ) 例子如下: byte[] buf = new byte[1024]; int len; wh ...

  5. Win7-IIS7下运行PHP网站(以配置好的drupal网站为例)

    0.前提:IIS7已启用. drupal网站配置文件web.config中用到了“简洁链接”(URL重写),所以,还需要事先安装URL重写模块. URL重写模块(url rewrite)下载地址: r ...

  6. 扩展Python模块系列(一)----开发环境配置

    本系列将介绍如何用C/C++扩展Python模块,使用C语言编写Python模块,添加到Python中作为一个built-in模块.Python与C之间的交互目前有几种方案: 1. 原生的Python ...

  7. Python开发【前端篇】CSS

    1.css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多 ...

  8. 第一次博客作业(初识C++)

    Q1:学习<C++语言程序设计>课程之前,你知道什么是编程吗?谈谈上这门课之前你对编程的理解,以及你对自己编程能力的评估. A1:开始课程之前,我认为编程是这样的:用计算机的语言写一份流程 ...

  9. Javascript高级编程学习笔记(38)—— DOM(4)Text

    Text类型 html页面中的纯文本内容就属于Text类型 纯文本内容可以包含转义后的html字符,但不能包括 html 代码 text类型具有以下属性.方法 nodeType:3 nodeName: ...

  10. selenium python 一些操作和定位收集

    (—)滚动条操作 python中selenium操作下拉滚动条方法汇总 selenium_webdriver(python)控制浏览器滚动条 selenium+Python(select定位) Sel ...