zoukankan      html  css  js  c++  java
  • History对象

    window对象的history属性引用的是该窗口的History对象,该对象的属性与方法如下未命名

      length: 表示history中的个数,(对象没有Length属性,但这个对象有)IE6是从0开始的,其余的从1开始计数

      go():  在用户的历史记录中前进或后退   ie支持向此方法中传URL参数  go() || go(0)  相当于location.reload

      forward() :  在用户的历史记录中前进一个

      back():  在用户的历史记录中后退一个

        //ps:  动态改变的html内容,是不能产生history的,除非采用html5中新增的方法

    ----------------------------------------------------------------------------------------------------------------------------

    ----------------漂亮的分割线---以下内容引自(http://zhanchaojiang.iteye.com/blog/1462994)-------------

    HTML5引入了histtory.pushState()和history.replaceState()这两个方法,他们允许添加和修改history实体。同时,这些方法会和window.onpostate事件一起工作。

    使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。

    pushState 用于向 history 添加当前页面的记录,而 replaceState 和 pushState 的用法完全一样,唯一的区别就是它用于修改当前页面在 history 中的记录。

    例子

    假设http://mozilla.org/foo.html页面执行了一下JS

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

    这种方法将会使url地址栏显示http://mozilla.org/bar.html,但浏览器不会加载bar.html页面,即使这个页面存在也不会加载。

    现在再次假设用户继续访问http://google.com,然后点击后退。这时,url地址栏将会,http://mozilla.org/bar.html,页面会得到popstate事件(chrome),这个状态对象会包含一个stateObj的copy。这个页面看起来像foo.html。+

    这时,我们再次点击后退,URL将变成http://mozilla.org/foo.html,document将得到另一个popstate事件和为null的state对象。这次的返回动作并没有改变文档的内容。(也许会过一会尝试加载…chrome)

    pushState方法

    pushState()有三个参数:state对象,标题(现在是被忽略,未作处理),URL(可选)。具体细节:

    · state对象 –state对象是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。

    · title—firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。或者可以传一个简短的标题来表示state

    · URL—这个参数用来传递新的history实体的URL,注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url。

    某种意义上来说,调用pushState()方法很像设置了window.location = “#foo”,这两者都会创建和激活另一个关联到当前document的history实体,但pushState()另外有一些优点:

    l 新的url可以是任何和当前url同域的url,相比之下,如果只设置hash,window.location会保持在同一个document。

    l 如果不需要,你可以不修改url。对比而言,设置window.location = “#foo”;仅产生新的history实体,如果你当前的hash不是#foo

    l 你可以将任意的数据与你的新history实体关联。使用基于hash的方法,需要将所有相关的数据编码为一个短字符串。

    注意,pushState()方法不会使hashchange时间发生,即使是新旧url只是hash不同。

    replaceState()方法

    history.replaceState() 用起来很像pushState(),除了replaceState()是用来修改当前的history实体而不是创建一个新的。这个方法有时会很有用,当 你需要对某些用户行为作反应而更新一个state对象或者当前history实体时,可以使用它来更新state对象或者当前history实体的url。

    popstate事件

    当history实体被改变时,popstate事件将会发生。如果history实体是有pushState和replaceState方法产生的,popstate事件的state属性会包含一份来自history实体的state对象的拷贝

    详见window.onpopstate

    读取当前的state

    读取现有state

    当页面加载时,它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载,页面将收到onload事件,但不会有popstate事件。然而,如果你读取history.state属性,将在popstate事件发生后得到这个state对象

    var currentState = history.state;

    Browsers: Tested and Working In

    HTML5 Browsers

    Chrome 8,9,10
    Firefox 4
    Safari 5
    Opera 11
    Safari iOS 4.3
    HTML4 Browsers

    IE6,7,8,9
    Firefox 3
    Opera 10
    Safari 4
    Safari iOS prior to version 4.3

    ----------------------------------------------------------------------------------------------------------------------------

    实例之后的结果未命名

      ie10支持,ie9及以下的不支持

      chrome,opera,ff,safari都支持

  • 相关阅读:
    增强的for循环(或foreach)
    XMLHTTP使用具体解释
    数据转换
    JS来推断文本框内容改变事件
    Java学习笔记——JDBC之PreparedStatement类中“预编译”的综合应用
    同类软件大比拼
    Java实现 蓝桥杯 历届试题 最大子阵
    Java实现 蓝桥杯 历届试题 最大子阵
    Java实现 蓝桥杯 历届试题 最大子阵
    Java实现 蓝桥杯 历届试题 最大子阵
  • 原文地址:https://www.cnblogs.com/fsy0718/p/3291443.html
Copyright © 2011-2022 走看看