当前窗口的浏览历史 window.history 对象

保存了当前窗口访问过的所有页面网址

由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航

history.back() 相当于 history.go(-1)

浏览器工具栏的 “前进” 和 “后退” 按钮,其实就是对 History 对象进行操作

  • // 当前窗口访问过多少个网页
    window.history.length // // History 对象的当前状态
    // 通常是 undefined,即未设置
    window.history.state // undefined

主要有两个属性

  • history.length ---- 当前窗口访问过的网址数量(包括当前网页)
  • history.state ---- history 堆栈 最上层的状态值

5 个方法

history.back() ---- 移动到上一个网址,等同于点击浏览器的后退键

对于第一个访问的网址,该方法无效果

history.forward() ---- 移动到下一个网址,等同于点击浏览器的前进键

对于最后一个访问的网址,该方法无效果

history.go() ---- 接受一个整数作为参数,以当前网址为基准,移动到参数指定的网址

比如  go(1) 相当于forward()     go(-1)相当于back()

如果参数超过实际存在的网址范围,该方法无效果

如果不指定参数,默认参数为 0,相当于刷新当前页面

注意: 移动到以前访问过的页面时,页面通常是从浏览器缓存之中加载,而不是重新要求服务器发送新的网页

history.pushState() ---- 用于在历史中添加一条记录

window.history.pushState(state, title, url)

不会触发页面刷新,只是导致 history 对象发生变化,地址栏会有反应

使用该方法之后,就可以用 history.state属性读出状态对象

  • var stateObj = { foo: 'bar' };
    history.pushState(stateObj, 'page 2', '2.html');
    history.state // {foo: "bar"}

    如果 pushState 的 URL 参数设置了一个新的锚点值(即 hash),并不会触发 hashchange 事件

  • 反过来,如果 URL 的锚点值变了,则会在 history 对象创建一条浏览记录
  • 如果pushState()方法设置了一个跨域网址,则会报错

这样设计的目的是,防止恶意代码让用户以为他们是在另一个网站上

因为这个方法不会导致页面跳转

接受三个参数

state ---- 一个与添加的记录相关联的状态对象,主要用于 popstate 事件

该事件触发时,该对象会传入回调函数

也就是说,浏览器会将这个对象序列化以后保留在本地

重新载入这个页面的时候,可以拿到这个对象。

如果不需要这个对象,此处可以填 null

title ---- 新页面的标题

现在所有浏览器都忽视这个参数,所以这里可以填空字符串

url ---- 新的网址

必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址

假定当前网址是 example.com/1.html

使用 pushState() 方法在浏览记录(history 对象)中添加一个新记录

  • var stateObj = { foo: 'bar' };
    history.pushState(stateObj, 'page 2', '2.html');

加新记录后,浏览器地址栏立刻显示 example.com/2.html

但并不会跳转到 2.html,甚至也不会检查 2.html 是否存在,它只是成为浏览历史中的最新记录

这时,在地址栏输入一个新的地址(比如访问 google.com ),然后点击了倒退按钮,页面的 URL 将显示 2.html

你再点击一次倒退按钮,URL 将显示 1.html

history.replaceState() ---- 用来修改 History 对象的当前记录,其他都与 pushState() 方法一模一样

假定当前网页是 example.com/example.html

  • history.pushState({page: 1}, 'title 1', '?page=1')
    // URL 显示为 http://example.com/example.html?page=1 history.pushState({page: 2}, 'title 2', '?page=2');
    // URL 显示为 http://example.com/example.html?page=2 history.replaceState({page: 3}, 'title 3', '?page=3');
    // URL 显示为 http://example.com/example.html?page=3 history.back()
    // URL 显示为 http://example.com/example.html?page=1 history.back()
    // URL 显示为 http://example.com/example.html history.go(2)
    // URL 显示为 http://example.com/example.html?page=3

popstate 事件

每当同一个文档的浏览历史(即 history 对象)出现变化时,就会触发 popstate 事件

仅仅调用 pushState() 方法或 replaceState() 方法 ,并不会触发该事件

该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发

  • window.onpopstate = function (event) {
    console.log('location: ' + document.location);
    console.log('state: ' + JSON.stringify(event.state));
    }; // 或者
    window.addEventListener('popstate', function(event) {
    console.log('location: ' + document.location);
    console.log('state: ' + JSON.stringify(event.state));
    });

回调函数的参数是一个event事件对象

它的 state属性指向 pushState 和 replaceState 方法为当前 URL 所提供的状态对象(即这两个方法的第一个参数)

这个 state 对象也可以直接通过 history 对象读取

var currentState = history.state;

注意,页面第一次加载的时候,浏览器不会触发popstate事件

BOM 浏览器对象模型_当前窗口的浏览历史 history 对象的更多相关文章

  1. BOM 浏览器对象模型_不超过 4 KB 的 document.cookie 对象

    注意: 客户端储存应该使用 Web storage API 和 IndexedDB,不推荐使用 Cookie document.cookie 对象 是服务器保存在浏览器的一小段文本信息 用于读写当前网 ...

  2. BOM 浏览器对象模型_同源限制

    “同源政策”(same-origin policy) 浏览器安全的基石 协议相同 域名相同 端口相同 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这个政策 A 网页 ...

  3. BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程

    1. 浏览器核心的两个组成部分 渲染引擎 将网页代码渲染为用户视觉可以感知的平面文档 分类: Firefox        Gecko 引擎 Safari        WebKit 引擎 Chrom ...

  4. BOM浏览器对象模型

    访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...

  5. 第一百一十一节,JavaScript,BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  6. javascript高级程序设计第3版——第8章 BOM(浏览器对象模型)

    第八章,浏览器对象模型 主要介绍了window的几个对象以及框架,窗口的关系,各个浏览器对象的属性以及方法:

  7. JavaScript——BOM(浏览器对象模型),时间间隔和暂停

    BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...

  8. js BOM浏览器对象模型

    BOM即Browser Object Model,浏览器对象模型,表示浏览器窗口,所有js全局对象.函数以及变量均是window 对象的成员. 对于不同的浏览器,表示宽度和高度的方法不同: 对于IE9 ...

  9. BOM——浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

随机推荐

  1. @RequestParam,@PathParam,@PathVariable等注解区别

    @RequestParam 和 @PathVariable 注解是用于从request中接收请求的,两个都可以接收参数,关键点不同的是@RequestParam 是从request里面拿取值,而 @P ...

  2. bilibili存储型xss (绕过长度限制打乱顺序限制)

    在个人空间的我的收藏中可编辑视频收藏的名称,之后尝试写入标签. http://space.bilibili.com/ 发现输出到前端的尖括号被转义了,不过出现了一个json接口,他的Content-T ...

  3. 第29月第14天 evpp

    1.evpp https://github.com/Qihoo360/evpp/tree/master/examples/recipes/self_control_timer https://blog ...

  4. Spring系列(二) Bean装配

    创建应用对象之间协作关系的行为称为装配(wiring), 这也是DI的本质. Spring中装配Bean的方式 Spring提供了三种装配Bean的方式. 隐式的Bean发现机制和自动装配 Java ...

  5. Django之会议室预预订

    model表设计: from django.db import models from django.contrib.auth.models import AbstractUser # Create ...

  6. Java正则表达式应用

    查找html中的图片 import java.util.regex.Matcher; import java.util.regex.Pattern; public class PicDownload ...

  7. Kafka简单使用

    前言 这几天在写 shell 脚本,学到不少,但是没啥心得之类的,有空可以写个总结(但是大概率不会发表) 现在不算很忙,想再学一点 消息队列相关知识 目前比较出名的也就 RabbitMQ 和 Kafk ...

  8. java 类加载机制 阿里面试题

    /** * 加载方法不等于执行方法,初始化变量则会赋值 * 类加载顺序应为 加载静态方法-初始化静态变量-执行静态代码块 * 实例化时 先加载非静态方法-实例化非静态变量-执行构造代码块-执行构造函数 ...

  9. 2019 Android 高级面试题总结 从java语言到AIDL使用与原理

    说下你所知道的设计模式与使用场景 a.建造者模式: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 使用场景比如最常见的AlertDialog,拿我们开发过程中举例,比如C ...

  10. An overview of network penetration testing

    1. an SQLi vulnerability will allow you  to do the  following query the database using select statem ...