BOM 浏览器对象模型_当前窗口的浏览历史 history 对象
当前窗口的浏览历史 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 对象的更多相关文章
- BOM 浏览器对象模型_不超过 4 KB 的 document.cookie 对象
注意: 客户端储存应该使用 Web storage API 和 IndexedDB,不推荐使用 Cookie document.cookie 对象 是服务器保存在浏览器的一小段文本信息 用于读写当前网 ...
- BOM 浏览器对象模型_同源限制
“同源政策”(same-origin policy) 浏览器安全的基石 协议相同 域名相同 端口相同 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这个政策 A 网页 ...
- BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程
1. 浏览器核心的两个组成部分 渲染引擎 将网页代码渲染为用户视觉可以感知的平面文档 分类: Firefox Gecko 引擎 Safari WebKit 引擎 Chrom ...
- BOM浏览器对象模型
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...
- 第一百一十一节,JavaScript,BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
- javascript高级程序设计第3版——第8章 BOM(浏览器对象模型)
第八章,浏览器对象模型 主要介绍了window的几个对象以及框架,窗口的关系,各个浏览器对象的属性以及方法:
- JavaScript——BOM(浏览器对象模型),时间间隔和暂停
BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...
- js BOM浏览器对象模型
BOM即Browser Object Model,浏览器对象模型,表示浏览器窗口,所有js全局对象.函数以及变量均是window 对象的成员. 对于不同的浏览器,表示宽度和高度的方法不同: 对于IE9 ...
- BOM——浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
随机推荐
- 校园wifi
我校师生访问本校校园WiFi(SSID为UESTC-WiFi),不受任何影响,用户名和密码均不变,可使用本校帐号加后缀@uestc.edu.cn,登录并免费使用eduroam联盟机构的WiFi(SSI ...
- FM(Factorization Machines)
摘自 https://www.jianshu.com/p/1687f8964a32 https://blog.csdn.net/google19890102/article/details/45532 ...
- JAVA进阶13
间歇性混吃等死,持续性踌躇满志系列-------------第13天 1.查看线程的运行状态 package code0327; class Demo01 implements Runnable { ...
- 深度学习在graph上的使用
原文地址:https://zhuanlan.zhihu.com/p/27216346 本文要介绍的这一篇paper是ICML2016上一篇关于 CNN 在图(graph)上的应用.ICML 是机器学习 ...
- centos7.5环境下编译安装php7.0.30并安装redis和mongo扩展
.安装php7..30的脚本 # vim install_php.sh #!/bin/bash # 安装基本依赖 yum install -y gcc gcc-c++ htop telnet ioto ...
- 【原创】大叔案例分享(4)定位分析--见证scala的强大
一 场景分析 定位分析广泛应用,比如室外基站定位,室内蓝牙beacon定位,室内wifi探针定位等,实现方式是三点定位 Trilateration 理想情况 这种理想情况要求3个基站‘同时’采集‘准确 ...
- 【原创】大数据基础之Kudu(2)移除dead tsever
当kudu有tserver下线或者迁移或者修改hostname之后,旧的tserver会一直以dead状态出现,并且tserver日志中会有大量的连接重试日志,一天的错误日志会有几个G, W0322 ...
- 网络抓包教程之tcpdump
现在的移动端应用几乎都会通过网络请求来和服务器交互,通过抓包来诊断和网络相关的bug是程序员的重要技能之一.抓包的手段有很多:针对http和https可以使用Charles设置代理来做,对于更广泛的协 ...
- java 类加载机制 阿里面试题
/** * 加载方法不等于执行方法,初始化变量则会赋值 * 类加载顺序应为 加载静态方法-初始化静态变量-执行静态代码块 * 实例化时 先加载非静态方法-实例化非静态变量-执行构造代码块-执行构造函数 ...
- 使用 wordcloud 构建词云图
from wordcloud import WordCloudfrom matplotlib import pyplot as pltfrom PIL import Imageimport numpy ...