history对象 back() forward() go() 和pushState() replaceState()
History(Window.history对象)对象保存着用户上网的历史记录。处于安全方面的考虑,开发人员无法得知用户浏览过的URL,但是借由用户访问过的页面列表,同样可以在不知道实际URL的情况下实现后退和前进。
History对象概况:
-------------------------------------------------------------------------------------------------------------------------------------------------------
Manipulating the browser history
Manipulating the browser history
The DOM window
object provides access to the browser's history through the history
object. It exposes useful methods and properties(方法和属性) that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack(操作历史堆栈).
Traveling through history
Moving backward and forward through the user's history is done using the back()
, forward()
, and go()
methods.
1 Moving forward and backward
To move backward through history, just do:
window.history.back();
This will act exactly like the user clicked on the Back button in their browser toolbar.(就像用户点击了浏览器上工具栏的后退按钮)
Similarly, you can move forward (as if the user clicked the Forward button), like this:
window.history.forward();
2 Moving to a specific point in history
You can use the go()
method to load a specific page from session history, identified by its relative position to the current page (with the current page being, of course, relative index 0).
To move back one page (the equivalent of calling back()
):
window.history.go(-1);
To move forward a page, just like calling forward()
:
window.history.go(1);
Similarly, you can move forward 2 pages by passing 2, and so forth.
You can determine the number of pages in the history stack(历史堆栈中的“历史数量”) by looking at the value of the length property:
var numberOfEntries = window.history.length;
Adding and modifying history entries
HTML5 introduced the history.pushState() and history.replaceState()
methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate
event.(HTML5添加了history.pushState()和history.replaceState()方法,两个方法和window.onpopstate()连在一起使用)
Using history.pushState()
changes the referrer that gets used in the HTTP header for XMLHttpRequest
objects created after you change the state. The referrer will be the URL of the document whose window is this
at the time of creation of the XMLHttpRequest
object.
The pushState() method
pushState()
takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL. Let's examine each of these three parameters in more detail:
state object — The state object is a JavaScript object which is associated with the new history entry created by
pushState()
. Whenever the user navigates to the new state, apopstate
event is fired, and thestate
property of the event contains a copy of the history entry's state object.The state object can be anything that can be serialized(可以被序列化的JS对象). Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to
pushState()
, the method will throw an exception. If you need more space than this, you're encouraged to usesessionStorage
and/orlocalStorage
.title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.
URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to
pushState()
, but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin(必须同源) as the current URL; otherwise,pushState()
will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.
In a sense, calling pushState()
is similar to setting window.location = "#foo"
, in that both will also create and activate another history entry associated with the current document.(某种意义上,使用pushState()和使用window.location是相同的,两者都会生成并激活和当前文档有关的“历史记录实体”) But pushState()
has a few advantages:
- The new URL can be any URL in the same origin as the current URL. In contrast, setting
window.location
keeps you at the samedocument
only if you modify only the hash(只有单单更新hash部分,window.location才会保持在同一个document;反之pushState()中的URL参数可以设置任何url,只要是符合同源). - You don't have to change the URL if you don't want to. In contrast, setting
window.location = "#foo";
only creates a new history entry if the current hash isn't#foo
. - You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.
- If
title
is subsequently used by browsers, this data can be utilized (independent of, say, the hash).
Note that pushState()
never causes a hashchange
event to be fired, even if the new URL differs from the old URL only in its hash.(即使是hash部分不一样,pushState()事件不会触发
hashchange事件
)
In a XUL document, it creates the specified XUL element.
In other documents, it creates an element with a null
namespace URI.
The replaceState() method
history.replaceState()
operates exactly like history.pushState()
except that replaceState()
modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.
replaceState()
is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.
The popstate event
A popstate
event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState
or affected by a call to replaceState
, the popstate
event's state
property contains a copy of the history entry's state object(一份“历史对象”状态对象的copy).
Note that just calling history.pushState()
or history.replaceState()
won't trigger(不会触发) apopstate
event. The popstate
event is only triggered by doing a 1、browser action such as clicking on the back button (or 2 、calling history.back()
in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document(同一个document).
Reading the current state
When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using pushState()
orreplaceState()
) and then the user restarts their browser. When your page reloads, the page will receive an onload event, but no popstate event(页面刚载入,只有onload事件,并没有popstate事件). However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.
You can read the state of the current history entry without waiting for a popstate
event using the history.state
property like this:
var currentState = history.state;
Example
Suppose http://mozilla.org/foo.html executes the following JavaScript:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
This will cause the URL bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html
or even check that bar.html
exists(浏览器不会去加载页面或检验页面是否存在).
Suppose now that the user now navigates to http://google.com, then clicks back. At this point, the URL bar will display http://mozilla.org/bar.html, and the page will get a popstate
event whose state object contains a copy of stateObj
. The page itself will look like foo.html
, although the page might modify its contents during the popstate
event.
If we click back again, the URL will change to http://mozilla.org/foo.html, and the document will get another popstate
event, this time with a null state object. Here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate
event.
-------------------------------------------------------------------------------------------------------------------------------------------------------
理解浏览器历史记录(2)-hashchange、pushState
history对象 back() forward() go() 和pushState() replaceState()的更多相关文章
- Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...
- HTML5无刷新修改Url,history pushState/replaceState
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- js pjax 和window.history.pushState,replaceState
原文:http://blog.linjunhalida.com/blog/pjax/ github:https://github.com/defunkt/jquery-pjax 什么是pjax? 现在 ...
- 使用JavaScript的history对象来实现页面前进后退(go/back/forward)。
我们都知道JavaScript有history对象,主要是用来记录浏览器窗口的浏览记录.但是,JS脚本是不允许访问到这个记录里面的内容(隐私). 常见的用法是: history.back();//返回 ...
- history对象back()、forward()、go()
history对象back().forward().go()方法history.back() 功能:加载历史列表中的前一个URL(后退). 语法:history.back() 调用该方法的效果等价于点 ...
- [Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存
转载: https://www.jianshu.com/p/cf63a1fabc86 现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置. 1.首先,先 ...
- Js的History对象
History回顾 window.history表示window对象的历史记录 window.history的简单回顾 历史记录中前进/后退,移动到指定历史记录点 window.history.bac ...
- HTML5 History对象,Javascript修改地址栏而不刷新页面
一.History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. ...
- BOM之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
随机推荐
- hdu 1698 Just a Hook(线段树基础)
成段更新的线段树,加入了延时标记............ 线段树这种东西细节上的理解因人而异,还是要自己深入理解......慢慢来 #include <iostream> #include ...
- struts2标签库使用小结
之前的demo中用了一些struts2标签,用的是struts2.2.1.1. Struts2的标签常常和OGNL(图对象导航语言)一起使用.有几点总结如下: [引用请注明出处:http://blog ...
- EL表达式学习
EL表达式取值 1.EL表达式的语法格式很简单: 以前编写jsp代码时,如果要获取表单中的用户名,一般使用 <%=request.getParameter("name")%& ...
- Tomcat启动时卡在“INFO: Deploying web application directory ”
今天在linux上的tomcat部署一个网站时,在刚启动tomcat的时候提示启动成功,然后也能访问成功. 可是第二次启动时虽然没有报错,但无法访问tomcat,查看了catalina.out日志,发 ...
- Nodejs --我自己的学习笔记
对于Nodejs,相信客官并不陌生,网上却已众说纷纭,有人说是一个平台,有人说是服务器JavaScript,有人说一个框架… 之前亦有过研究,多怀可远观而不可亵玩也.高效率,I/O操作,异步编程,以及 ...
- 使用gulp构建自动化工作流
简单易用 高效构建 高质量的生态圈 可能很多人会说现在提gulp也太落后了吧,但我想说写点东西并不是为了讨论它是否过时,而是来帮助我们自己来记忆.整理和学习.任何工具,我需要,我才去使用它,正如此时我 ...
- [pinyin4j] java版汉字转换拼音(大小写)
pinyin4J 是一个可以将汉字转换成拼音的lib,非常实用,其maven地址为:http://mvnrepository.com/artifact/com.belerweb/pinyin4j/2. ...
- json字符串参数
jsp部分 json字符串的属性应该都是实体类的属性 function saveCashier(){ layer.closeAll(); var Reapply = document.g ...
- 最近一段时间get到的小知识(c++的)
(1)查看一个程序运行的时间 int main() { clock_t start,end; start=clock(); ... end=clock(); cout<<"Run ...
- idea不能加载xml