历史返回,若无页面则跳转到指定页面

开头总要有点废话

这个功能在原先的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。

注意: 在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 至 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 中,传入的对象使用JSON来进行序列化。从 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)开始,对象使用结构化拷贝算法来进行序列化。这将允许更多类型的对象能够安全传入。

某种意义上,调用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.

塞进的state对象是为了获取对应的url链接。

注意点:

第一个pushState我将跳转url放进state对象 方便跳转操作。第二个参数没有实际意义,因为现在的浏览器基本不适用这个参数。

第三个参数是会替换当前地址栏的链接的,但是页面不会发生跳转。(我之前犯了个错误,将第三个参数设置为首页链接,导致了地址栏更改为首页链接,以至于在当前页的链接 都以首页为基础进行跳转,导致页面的所有链接都跳转错误了。)

    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);

这段代码放置在页面的ready事件中执行,延迟300毫秒是为了将操作滞后,防止与系统pop事件冲突。

if语句为了判断 history是否存在state对象,因为只有满足我们要求的记录才会有我们添加的state对象 所以 根据这点可以进行页面的跳转操作。

这样就可以实现我们想要的效果。

写在最后

缺点:

1. 很明显,就如开头提到的。只适合支持html5的浏览器使用。

2.由于插进了两条记录 ,所以 类似于 微信这种移动端的返回,需要再点击两次返回,才能推出页面,回到微信聊天窗口,用户体验不好。

总结:

这种方法 一定还可以优化和完善,只是目前我的实力不足,还不足以完善到完美的程度。

希望看到这篇文章的朋友可以提出自己的见解,意见!

时间: 2024-11-08 22:13:13

历史返回,若无页面则跳转到指定页面的相关文章

点击浏览器返回,若无页面则跳转到指定页面

开头总要有点废话 这个功能在原先的js分享中 有简单的带过,这里拎出来 详细的讲解下原理和存在的问题. 知识要点 HTML5引进了history.pushState()方法和history.replaceState()方法,它们允许你逐条地添加和修改历史记录条目.这些方法可以协同window.onpopstate事件一起工作. 使用 history.pushState() 会改变 referrer 的值,而在你调用方法后创建的 XMLHttpRequest 对象会在 HTTP 请求头中使用这个值

JavaScript跳转到指定页面并且到指定的tab切换窗口

案例的解析就是点击A页面的第一个的切换窗口的按钮跳转到B页面,再点击B页面的按钮跳转到A页面的第二个窗口,这个实现的效果有三种方法,下面的图片案例: A页面的第一个切换窗口 B页面的跳转按钮 A页面的第二个切换窗口 第一方法用函数function: 演示效果:JavaScript跳转到指定页面并且到指定的tab切换窗口 A页面按钮 <a href="b.html?id=1980&order_type=p_order">aaaaa</a> B页面按钮代码:

登陆判读,并跳转到指定页面(window.location.href=&#39;http://localhost/index.html&#39;)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 function confirm(){   var tel=$tel.val();//获取页面中登录名和密码   var pwd=$pwd.val();   if(tel==""|| pwd==""){//判断两个均不为空(其他判断规则在其输入时已经判断)     alert(&qu

H5如何实现关闭当前页面,跳转到新页面?

小程序有此功能的跳转方法. 那么H5如何实现该功能?  很简单. location.replace('new.html')  这个方法可以实现 关闭当前页面,跳转到新页面 的效果. 而   window.location.href  =  “new.html”, 这个方法会保留历史的访问记录. 原文地址:https://www.cnblogs.com/teamemory/p/10966471.html

js指定时间之后跳转到指定页面代码实例

js指定时间之后跳转到指定页面代码实例:在某些场景下,需要网页在指定的时间后,网页能够自动跳转到指定页面,比如在无法找到指定网页的情况下,就会显示之前设置好的404页面,并且跳转到指定的页面,下面就是一段代码实现了此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

html &lt;meta&gt;设置自动刷新或者几秒内跳转到指定页面

指定时间自动刷新: <meta http-equiv="refresh" content="2"/> 指定时间跳转到指定页面: <meta http-equiv="refresh" content="5;URL=http://www.baidu.com"/>

ASP.Net 设置 404错误跳转到指定页面

分享 ASP.Net 网站设置 404错误跳转到指定页面的三种方法 方法一:Web.config 配置 1 首先双击打开项目中的“Web.config”文件  找到 system.web 节点,在 customErrors 节点中添加 mode 为 on,然后把图中“404.html"替换成你需要的文件路径名,如图所示(如果没有此节点,请手 动添加上,代码有智能提示,很方便添加) 重新编译后,即跳转到指定的页面中. 方法二:Global.asax 配置 同样在项目中找到并双击打开“Global.

解决js中post提交数据并且跳转到指定页面的问题总结

今天在开发中过程中遇到了这个问题,js中利用JQuery中的 $.post("url", id, function(){}); 这个方法是数据提交正常,但是后台处理完成之后跳转无法成功.经过分析,后台只是将要跳转的页面的html发回了前台,也就是说前台与后台利用JQuery的post方法只能发生数据的交互,并不能实现页面的跳转.所以,这就导致无法正常跳转. 解决方案: 1.将我们要提交的数据加入到指定的form表单中,在form表单中设置需要跳转的url和方法类型 post或get等

silverlight 退出当前页面、跳转到主页面

1.退出当前页面 1 private void imgExit_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 2 { 3 if (MessageBox.Show("确定要退出当前页面?", "提示", MessageBoxButton.OKCancel) == MessageBoxResult.OK) 4 { 5 //Silverlight调用JS 6 ScriptObject Show = Htm