Html5页面中的返回实现的方法


Posted in HTML / CSS onFebruary 26, 2018

看到这个题目你可能觉得这是什么鬼? 其实我想说的是这种,看下面的录制:

Html5页面中的返回实现的方法

这种交互在H5页面中比比皆是,点击城市->弹出城市选择浮层->按返回按钮关闭浮层。

这些操作都是不要点击左上角/右上角的关闭按钮就可以进行的,飞猪的H5是前进出现弹层,返回时弹层关闭,其他家都不行(去哪儿网H5飞机票,美团H5酒店)。

为什么要这么设计?

因为H5是在手机上操作的,手机上的手指可操作区域的覆盖范围很小,更别说左上角/右上角这些死角(取消/关闭)区域了。你肯定听过这个操作:轻触返回。这个在用户操作的时候非常方便友好,选择完城市后,不需要点击取消,直接在大拇指可以操作的地方点击返回就关闭了弹层。

如何实现

既然有这种非常好的需求,那作为开发肯定就会想法设法的实现这个功能了。 你甚至都不用google,你就应该会想到类似的history.back(),history.go()这些方法了。 然而想到这些依旧没用,理论上 浏览器/webview 的返回/前进的是要重新加载页面的,因为URL发生了变化。 如果你真的知道单页面应用(SPA),或者使用React/Vue你就应该知道有个东西叫:路由。 这些通过改变hash且无法刷新的url变化是HTML5时加入的history功能

the-history-interface

interface History {
  readonly attribute unsigned long length;
  attribute ScrollRestoration scrollRestoration;
  readonly attribute any state;
  void go(optional long delta = 0);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional DOMString? url = null);
  void replaceState(any data, DOMString title, optional DOMString? url = null);
};
  1. pushState
  2. replaceState

还有一个事件

  1. onpopstate

pushState,replaceState 用来改变histroy堆栈顺序,onpopstate 在返回,前进的时候触发

vue-router中的实现也是如此(第1694行)

具体实现

既然说了这么多,那我们来看下怎么实现这种功能。

来看下 pushState 和 replaceState 的兼容性

Html5页面中的返回实现的方法

全绿,用起来放心多了。

思路:

  1. 点击弹层时 pushState 添加 hash
  2. "轻触返回"的时候触发 onpopstate 事件时候隐藏弹层并修改 hash
<button onclick="city()">
        城市
    </button><br>
    <button onclick="calendar()">
        日历
    </button><br>
    <button onclick="description()">
        说明
    </button>

    <div id="city" class="com" style="display: none;">
      模拟城市弹框层
    </div>
    <div id="calendar" class="com" style="display: none;">
      模拟日历弹框层
    </div>
     <div id="description" class="com" style="display: none;">
      模拟说明弹框层
    </div>
button {
          border: #0000;
          background-color: #f90;
      }
      .com {
        position: absolute ;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #888589;
      }
var cityNode = document.getElementById('city');
    var calendarNode = document.getElementById('calendar');
    var descriptionNode = document.getElementById('description');
      function city() {
        cityNode.style.display = 'block';
        window.history.pushState({'id':'city'},'','#city')
      }
      function calendar() {
        calendarNode.style.display = 'block';
        window.history.pushState({'id':'calendar'},'','#calendar')
      }
      function description() {
        descriptionNode.style.display = 'block';
        window.history.pushState({'id':'description'},'','#description')
      }
      window.addEventListener('popstate', function(e){
        // alert('state:' + e.state + ', historyLength:' + history.length);
        if (e.state && e.state.id === 'city') {
            history.replaceState('','','#');
            cityNode.style.display = 'block';
        } else if (e.state && e.state.id === 'calendar') {
            history.replaceState('','','#');
            calendarNode.style.display = 'block';
        } else if (e.state && e.state.id === 'description') {
            history.replaceState('','','#');
            descriptionNode.style.display = 'block';
        } else {
            cityNode.style.display = 'none';
            calendarNode.style.display = 'none';
            descriptionNode.style.display = 'none';
        }
      })

主要看 JS 代码,监听页面的前进和后退事件来控制history。

Html5页面中的返回实现的方法

源码在此

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 #HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 #HTML / CSS
canvas绘制视频封面的方法
Feb 05 #HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 #HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 #HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 #HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 #HTML / CSS
You might like
php获取某个目录大小的代码
2008/09/10 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP中的事务使用实例
2015/05/26 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
自己使用总结Python程序代码片段
2015/06/02 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
经理助理岗位职责
2014/03/05 职场文书
奶茶店创业计划书
2014/08/14 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
同学聚会邀请函
2015/01/30 职场文书
护理心得体会范文
2016/01/22 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python