当前窗口的浏览历史 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. 校园wifi

    我校师生访问本校校园WiFi(SSID为UESTC-WiFi),不受任何影响,用户名和密码均不变,可使用本校帐号加后缀@uestc.edu.cn,登录并免费使用eduroam联盟机构的WiFi(SSI ...

  2. FM(Factorization Machines)

    摘自 https://www.jianshu.com/p/1687f8964a32 https://blog.csdn.net/google19890102/article/details/45532 ...

  3. JAVA进阶13

    间歇性混吃等死,持续性踌躇满志系列-------------第13天 1.查看线程的运行状态 package code0327; class Demo01 implements Runnable { ...

  4. 深度学习在graph上的使用

    原文地址:https://zhuanlan.zhihu.com/p/27216346 本文要介绍的这一篇paper是ICML2016上一篇关于 CNN 在图(graph)上的应用.ICML 是机器学习 ...

  5. centos7.5环境下编译安装php7.0.30并安装redis和mongo扩展

    .安装php7..30的脚本 # vim install_php.sh #!/bin/bash # 安装基本依赖 yum install -y gcc gcc-c++ htop telnet ioto ...

  6. 【原创】大叔案例分享(4)定位分析--见证scala的强大

    一 场景分析 定位分析广泛应用,比如室外基站定位,室内蓝牙beacon定位,室内wifi探针定位等,实现方式是三点定位 Trilateration 理想情况 这种理想情况要求3个基站‘同时’采集‘准确 ...

  7. 【原创】大数据基础之Kudu(2)移除dead tsever

    当kudu有tserver下线或者迁移或者修改hostname之后,旧的tserver会一直以dead状态出现,并且tserver日志中会有大量的连接重试日志,一天的错误日志会有几个G, W0322 ...

  8. 网络抓包教程之tcpdump

    现在的移动端应用几乎都会通过网络请求来和服务器交互,通过抓包来诊断和网络相关的bug是程序员的重要技能之一.抓包的手段有很多:针对http和https可以使用Charles设置代理来做,对于更广泛的协 ...

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

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

  10. 使用 wordcloud 构建词云图

    from wordcloud import WordCloudfrom matplotlib import pyplot as pltfrom PIL import Imageimport numpy ...