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主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
随机推荐
- @RequestParam,@PathParam,@PathVariable等注解区别
@RequestParam 和 @PathVariable 注解是用于从request中接收请求的,两个都可以接收参数,关键点不同的是@RequestParam 是从request里面拿取值,而 @P ...
- bilibili存储型xss (绕过长度限制打乱顺序限制)
在个人空间的我的收藏中可编辑视频收藏的名称,之后尝试写入标签. http://space.bilibili.com/ 发现输出到前端的尖括号被转义了,不过出现了一个json接口,他的Content-T ...
- 第29月第14天 evpp
1.evpp https://github.com/Qihoo360/evpp/tree/master/examples/recipes/self_control_timer https://blog ...
- Spring系列(二) Bean装配
创建应用对象之间协作关系的行为称为装配(wiring), 这也是DI的本质. Spring中装配Bean的方式 Spring提供了三种装配Bean的方式. 隐式的Bean发现机制和自动装配 Java ...
- Django之会议室预预订
model表设计: from django.db import models from django.contrib.auth.models import AbstractUser # Create ...
- Java正则表达式应用
查找html中的图片 import java.util.regex.Matcher; import java.util.regex.Pattern; public class PicDownload ...
- Kafka简单使用
前言 这几天在写 shell 脚本,学到不少,但是没啥心得之类的,有空可以写个总结(但是大概率不会发表) 现在不算很忙,想再学一点 消息队列相关知识 目前比较出名的也就 RabbitMQ 和 Kafk ...
- java 类加载机制 阿里面试题
/** * 加载方法不等于执行方法,初始化变量则会赋值 * 类加载顺序应为 加载静态方法-初始化静态变量-执行静态代码块 * 实例化时 先加载非静态方法-实例化非静态变量-执行构造代码块-执行构造函数 ...
- 2019 Android 高级面试题总结 从java语言到AIDL使用与原理
说下你所知道的设计模式与使用场景 a.建造者模式: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 使用场景比如最常见的AlertDialog,拿我们开发过程中举例,比如C ...
- An overview of network penetration testing
1. an SQLi vulnerability will allow you to do the following query the database using select statem ...