历史返回,若无页面则跳转到指定页面
开头总要有点废话
这个功能在原先的js分享中 有简单的带过,这里拎出来 详细的讲解下原理和存在的问题(由于是运用html5的新API 所以有兼容问题,推荐移动端使用该方法)。
功能描述:
在浏览器中新建标签页并指定一个网址,网页加载完毕后,正常流程下是不允许点击返回的。因为当前标签页的相关历史记录是没有的,所以没有记录可以返回。
应客户要求,需要在这种情况下,给他的历史记录里添加一个链接(比如首页),这样在新打开的页面,点击返回就可以跳转到首页,让用户看到系统的各种功能,推广平台。
知识要点
HTML5引进了history.pushState()方法和history.replaceState()方法,它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。
案例
假设 http://mozilla.org/foo.html 将执行如下JavaScript代码:
1 var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
这将让浏览器的地址栏显示http://mozilla.org/bar.html,但不会加载bar.html页面也不会检查bar.html是否存在。
假设现在用户导航到了http://google.com,然后点击了后退按钮,此时,地址栏将会显示http://mozilla.org/bar.html,并且页面会触发popstate事件,该事件中的状态对象(state object)包含stateObj的一个拷贝。该页面看起来像foo.html,尽管页面内容可能在popstate事件中被修改。
如果我们再次点击后退按钮,URL将变回http://mozilla.org/foo.html 文档将触发另一个popstate事件,这次的状态对象为null。回退同样不会改变文档内容。
pushState()方法
pushState()有三个参数:一个状态对象、一个标题(现在会被忽略),一个可选的URL地址。下面来单独考察这三个参数的细节:
-
状态对象(state object) — 一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。
任何可序列化的对象都可以被当做状态对象。因为FireFox浏览器会把状态对象保存到用户的硬盘,这样它们就能在用户重启浏览器之后被还原,我们强行限制状态对象的大小为640k。如果你向pushState()方法传递了一个超过该限额的状态对象,该方法会抛出异常。如果你需要存储很大的数据,建议使用sessionStorage或localStorage。
-
标题(title) — FireFox浏览器目前会忽略该参数,虽然以后可能会用上。考虑到未来可能会对该方法进行修改,传一个空字符串会比较安全。或者,你也可以传入一个简短的标题,标明将要进入的状态。
-
地址(URL) — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址,但之后,可能会试图加载,例如用户重启浏览器。新的URL不一定是绝对路径;如果是相对路径,它将以当前URL为基准;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。该参数是可选的;不指定的话则为文档当前URL。
某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势:
-
新的URL可以是任意的同源URL,与此相反,使用window.location方法时,只有仅修改 hash 才能保证停留在相同的document中。
-
根据个人需要来决定是否修改URL。相反,设置window.location='#foo',只有在当前hash值不是foo时才创建一条新历史记录。
-
你可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法,你只能把相关数据转码成一个很短的字符串。
注意pushState()方法永远不会触发hashchange事件,即便新的地址只变更了hash。
popstate事件
每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。
replaceState()方法
history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。
实现思路
1.利用popstate事件,监听点击返回事件。
2.触发事件时,判断当前页面的历史记录 是否有页面可以返回。
3.如果没有页面可以返回,则插入两条记录:
1、指定的跳转页面。
2、空记录。(使当前页面不发生变化)
实现方法
//返回之前没页面则返回首页 function pushHistory() { if (history.length < 2) { var state = { title: "index", url: getHttpPrefix + "index.html" }; window.history.pushState(state, "index", location.href); state = { title: "index", url: "" }; window.history.pushState(state, "index", ""); } //lll("history.state" + history.state) //console.log(history.state) }
判断当前history中的记录个数,由于页面加载的时候,浏览器会自动push进一个记录。所以要判断长度是否小于2.
第三个参数是会替换当前地址栏的链接的,但是页面不会发生跳转。(我之前犯了个错误,将第三个参数设置为首页链接,导致了地址栏更改为首页链接,以至于在当前页的链接 都以首页为基础进行跳转,导致页面的所有链接都跳转错误了。)
setTimeout(function () { pushHistory() window.addEventListener("popstate", function (e) { lll("popstate"+window.history.state) if (window.history.state != null && window.history.state.url != "") { location.href = window.history.state.url } }); }, 300);