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 相关文章推荐
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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/04/07 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
基于python实现学生管理系统
2018/10/17 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python装饰器练习题及答案
2019/11/01 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
python urllib和urllib3知识点总结
2021/02/08 Python
事业单位人员的自我评价范文
2014/09/21 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书