html 返回,html如何返回首页
看到这个题目你觉得这是个什么鬼？其实我想说的就是这种。观看下面的录音：
这种互动在H5网页上随处可见。点击城市-弹出城市选择浮动层-按返回按钮关闭浮动层。
这些操作可以在不点击左上角/右上角的关闭按钮的情况下进行。飞猪的H5前进时是炸弹层，返回时炸弹层关闭，其他家不行(Qunar.com H5机票，美团H5酒店)。
为什么要这么设计？
因为H5是在手机上操作的，所以手机上手指可操作的区域覆盖范围很小，更不用说左上角/右上角的这些死角(取消/关闭)区域了。你一定听过这个操作：摸回去。这个用户操作起来非常方便友好。选择城市后，不需要点击取消，只需在拇指可以操作的地方点击返回关闭炸弹层即可。
如何实现
既然有这么好的需求，作为开发者，我们一定会尽力实现这个功能。如果你连google都不用，那就要想到history.back()和history.go()这样的方法。但是，想这些还是没用。理论上，浏览器/webview返回/前进以重新加载页面，因为URL已经改变。如果你真的了解单页应用(SPA)或者使用React/Vue，你应该知道有个东西叫路由。这些不能通过改变hash来刷新的url改变，就是HTML5中添加的历史函数。
历史界面
接口历史{ readonly属性无符号长长度；属性scroll restoration scroll restoration；任何状态的只读属性；void go(可选long delta=0)；void back()；void forward()；void pushState(任意数据，DOMString标题，可选DOMString？URL=null)；void replaceState(任意数据，DOMString标题，可选DOMString？URL=null)；};PushState replaceState有另一个事件。
OnpopstatepushState，replaceState用于改变历史堆栈顺序，返回和前进时触发onpopstate。
vue路由器中的实现也是如此(第1694行)
具体实现
说了这么多，我们来看看这个功能是怎么实现的。
让我们来看看pushState和replaceState之间的兼容性
全绿色，用起来放心多了。
想法：
点击弹层时推送状态添加哈希轻触返回的时候触发onpopstate事件时候隐藏弹层并修改hashbutton 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；背景色：# f90}。com { position:绝对；top:0；底部：0;左：0;右：0;背景色：# 888589;} var城市节点=文档。getelementbyid( city )；var日历节点=文档。getelementbyid(“日历”)；变量描述节点=文档。getelementbyid(“description”)；函数city(){ city节点。风格。display= block窗户。历史。推送状态({ id : city }，， #city) }函数calendar(){ calendar节点。风格。display= block窗户。历史。推送状态({ id : calendar }，， #calendar) }函数描述(){描述节点。风格。display= block窗户。历史。推送状态({ id : description }，， # description )}窗口。addevent侦听器( pop state ，function(e){//alert( state: e . state ，历史长度： history。长度)；if(e . state e . id=== city ){ history。替换状态(，， # )；城市节点。风格。display= block} else if(e . state e . id===日历){ history。替换状态(，， # )；日历节点。风格。display= block} else if(e . state e . id=== description ){ history。替换状态(，， # )；描述节点。风格。display= block} else {城市节点。风格。display= none日历节点。风格。display= none描述节点。风格。display= none} })主要看射流研究…代码，监听页面的前进和后退事件来控制历史。
源码在此
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。