js点击返回跳转到指定页面实现过程

这个功能之前有简单的带过,这次详细的讲解下原理和存在的问题(由于是运用html5的新API 所以有兼容问题,推荐移动端使用该方法)。

功能描述:

在浏览器中新建标签页并指定一个网址,网页加载完毕后,正常流程下是不允许点击返回的。因为当前标签页的相关历史记录是没有的,所以没有记录可以返回。

应客户要求,需要在这种情况下,给他的历史记录里添加一个链接(比如首页),这样在新打开的页面,点击返回就可以跳转到首页,让用户看到系统的各种功能,推广平台。

一、知识要点

HTML5引进了history.pushState()方法和history.replaceState()方法,它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。

案例:
假设 http://mozilla.org/foo.html 将执行如下JavaScript代码:

代码如下:

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()有自己的优势:

1、新的URL可以是任意的同源URL,与此相反,使用window.location方法时,只有仅修改 hash 才能保证停留在相同的document中。

2、根据个人需要来决定是否修改URL。相反,设置window.location='#foo',只有在当前hash值不是foo时才创建一条新历史记录。

3、你可以在新的历史记录条目中添加抽象数据。如果使用基于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.由于插进了两条记录 ,所以 类似于 微信这种移动端的返回,需要再点击两次返回,才能推出页面,回到微信聊天窗口,用户体验不好。

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

希望看到这篇文章的朋友可以得到一些启发,或者是有更好的方法实现。

(0)

相关推荐

  • JS实现点击网页判断是否安装app并打开否则跳转app store

    常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用户的操作步骤: 1.用户第一次访问宣传页面 a.点击Banner,进入到APP Store中对应的APP下载页 b.APP下载页中提示:安装:用户点击安装 c.安装完成后,APP下载页中提示:打开:用户继续点击打开 d.用户正常使用APP 2.用户第二次访问宣传页面 a.点击Banner,进入到AP

  • JS实现点击链接取消跳转效果的方法

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <script type="text/javascript">

  • 下拉菜单点击实现连接跳转功能的js代码

    1.js代码 复制代码 代码如下: <!-- function MM_jumpMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } --> 2.使用 复制代码 代码如下: <p class="yq">校

  • JS简单实现点击跳转登陆邮箱功能的方法

    本文实例讲述了JS简单实现点击跳转登陆邮箱功能的方法.分享给大家供大家参考,具体如下: 前言 注册的过程中往往需要填写邮箱,并登陆邮箱进行验证.利用JS可以实现针对不同的邮箱进行点击登录验证,以下为实现方案,很简单 代码 邮箱域名数据 var hash = { 'qq.com': 'http://mail.qq.com', 'gmail.com': 'http://mail.google.com', 'sina.com': 'http://mail.sina.com.cn', '163.com'

  • js监听鼠标点击和键盘点击事件并自动跳转页面

    js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,

  • js实现点击链接后延迟3秒再跳转的方法

    本文实例讲述了js实现点击链接后延迟3秒再跳转的方法.分享给大家供大家参考.具体分析如下: js实现点击链接后延迟3秒再跳转.不管有没有用,咱们反正能实现 使用setTimeout()函数实现跳转延迟 <html> <head> <title> jquery 延迟跳转</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"

  • JS动态添加的div点击跳转到另一页面实现代码

    div调用函数跳转: var obj = document.getElementById('id'); obj.onclick=function(){ window.location.href="跳转的地址" rel="external nofollow" ; } 源文件: <!DOCTYPE html> <html> <head> <title>首页推荐页面</title> <meta name=&

  • js点击button按钮跳转到另一个新页面

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick="window.location='新页面'" 来实现. 1.在原来的窗体中直接跳转用 代码如下 window.location.href="你所要跳转的页面"; 2.在新窗体中打开页面用: 代码如下 window.open('你所要跳转的页面'); window.hist

  • js点击返回跳转到指定页面实现过程

    这个功能之前有简单的带过,这次详细的讲解下原理和存在的问题(由于是运用html5的新API 所以有兼容问题,推荐移动端使用该方法). 功能描述: 在浏览器中新建标签页并指定一个网址,网页加载完毕后,正常流程下是不允许点击返回的.因为当前标签页的相关历史记录是没有的,所以没有记录可以返回. 应客户要求,需要在这种情况下,给他的历史记录里添加一个链接(比如首页),这样在新打开的页面,点击返回就可以跳转到首页,让用户看到系统的各种功能,推广平台. 一.知识要点 HTML5引进了history.push

  • iOS 点击推送消息跳到应用指定页面的实例

    iOS 点击推送消息跳到应用指定页面 现在的推送用的越来越频繁,几乎每个应用都开始用到了.其实又有几个用户会去看推送消息呢?没办法,产品经理最大啊,只是苦了我们这一帮程序员啊!闲话少说,进入正题.兄弟我用的是极光推送,自然是以极光推送为例了.   现在点击推送消息,有两种跳转方式:1.打开应用,跳转到应用首页:2.打开应用,跳转到指定页面. ​第一种,你什么都不用设置,只要注册极光应用就可以.这里就不写怎么注册极光应用了,可以参考官方文档,写的很详细. ​ 第二种,重头戏来了. // APP未运

  • iOS点击推送消息跳到应用指定页面方法

    现在的推送用的越来越频繁,几乎每个应用都开始用到了.其实又有几个用户会去看推送消息呢?没办法,产品经理最大啊,只是苦了我们这一帮程序员啊!闲话少说,进入正题.兄弟我用的是极光推送,自然是以极光推送为例了. 现在点击推送消息,有两种跳转方式:1.打开应用,跳转到应用首页:2.打开应用,跳转到指定页面. ​第一种,你什么都不用设置,只要注册极光应用就可以.这里就不写怎么注册极光应用了,可以参考官方文档,写的很详细. 第二种,重头戏来了. // APP未运行时获取通知的内容 remoteNotific

  • 微信小程序返回箭头跳转到指定页面实例解析

    这篇文章主要介绍了微信小程序返回箭头跳转到指定页面实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 onUnload: function () { wx.reLaunch({ url: '../me/order-detail', }) }, //这里url搞相对路径 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • Android 接收推送消息跳转到指定页面的方法

    问题的提出 本次接入的是个推,其他家的推送没有研究过,思路应该是类似的 App在前台,这个时候需要弹出一个对话框,提醒用户有新的消息,是否要查看,查看的话跳转到指定页面 App在后台,或是App进程已经被系统回收,收到推送后App进程会被个推拉起.这时候要展示通知,点击通知栏打开App并跳转到目标页面,关闭目标页面后需要返回到应用首页,而不是直接推出App 实现思路 App在前台时,弹出Dialog提醒用户有新消息,但是最新版的个推文档接收推送消息是继承IntentService,无法获取弹出D

  • 基于JavaScript实现定时跳转到指定页面

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

  • Django模板标签中url使用详解(url跳转到指定页面)

    django {% url %} 模板标签使用 inclusions/_archives.html ... {% for date in date_list %} <li> <a href="{% url 'blog:archive' date.year date.month %}" rel="external nofollow" > {{ date.year }} 年 {{ date.month }} 月 </a> </l

  • 使用springboot跳转到指定页面和(重定向,请求转发的实例)

    目录 springboot跳转到指定页面 controller的写法 springboot重定向和请求转发 springboot重定向 springboot的请求转发 springboot转发和重定向 springmvc重定向写法 转发的特点 重定向的特点 springboot跳转到指定页面 controller的写法 必须是templates下面的页面,不经过配置,无法直接跳转到public,static,等目录下的页面 package com.ljf.spring.boot.demo.con

  • PHP+MySQL实现输入页码跳转到指定页面功能示例

    本文实例讲述了PHP+MySQL实现输入页码跳转到指定页面功能.分享给大家供大家参考,具体如下: 一.代码 conn.php: <?php $id=mysql_connect("localhost","root","root")or dir('连接失败' . mysql_error()); if(mysql_select_db("db_database13",$id)) echo ""; else e

  • 微信小程序点击列表跳转到对应详情页过程解析

    这篇文章主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 点击列表跳转到对应详情页: 用自定义属性data-index保存当前点击列表的index,在点击跳转的方法中获取index并且拼接到要跳转的路径后面: 跳转到详情页,在onLoad钩子中通过参数options获取传过来的index,渲染对应的数据 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

随机推荐