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都支持

  • 相关阅读:
    Html禁止粘贴 复制 剪切
    表单标签
    自构BeanHandler(用BeansUtils)
    spring配置中引入properties
    How Subcontracting Cockpit ME2ON creates SD delivery?
    cascadia code一款很好看的微软字体
    How condition value calculated in sap
    Code in SAP query
    SO Pricing not updated for partial billing items
    Javascript learning
  • 原文地址:https://www.cnblogs.com/fsy0718/p/3291443.html
Copyright © 2011-2022 走看看