文档章节

popstate的自动触发问题

l
 lerner
发布于 2016/12/09 12:49
字数 417
阅读 870
收藏 1

前段时间,因为项目需要,需要监听微信的返回按钮,于是用到了HTML5中的popstate,作为history系列中的事件,popstate在微信中存在这样一个问题:"当页面被加载的时候,popstate会立即被触发,从而导致页面返回到上一级页面"。而根据官方文档对popstate的描述只要访问历史记录就会触发popstate。而传统的History中访问页面和生产历史记录是同时的。在webkit(X5 blink)中,无论是刷新还是访问一个新网页都会触发popstate。

解决方案有两种: 

方案一: 

设置延迟时间:

function GoBack(e) {
    this.init(e);
}
GoBack.prototype = {
    constructor: GoBack,
    init: function (url) {
        this.pushHistory();
        var bool = false;
        setTimeout(function(){
            bool = true;
        },1000);
        window.addEventListener("popstate", function() {
            if(bool) {
                //这里填写具体的动作
            }
            this.pushHistory();//出栈

        }, false);
    },
    pushHistory: function () {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
}
export default GoBack;

设置延迟的=有一个弊端,你要执行的具体动作要等延迟时间过了才可以,各种手机所需延迟时间长短不同,延迟设置的过低,会立即触发你要执行的动作,设置的过高,这段时间内你要执行的动作都不会被触发。(例如返回键失灵)。

方案二:

function GoBack(e) {
    this.init(e);
}
GoBack.prototype = {
    constructor: GoBack,
    init: function (url) {
        this.pushHistory();
        window.addEventListener('load', function() {     
            setTimeout(function() {       
               window.addEventListener('popstate', function() {        
               //要执行的具体动作      
               });     
            }, 0);   
         })
    },
    pushHistory: function () {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
}
export default GoBack;

第二种方案没有设置通过把页面加载完成后第一次触发的popstate事件屏蔽,来避免popstate马上执行。这中方案自己还没试过,貌似可行!

© 著作权归作者所有

共有 人打赏支持
l
粉丝 0
博文 16
码字总数 3217
作品 0
加载中

评论(2)

l
lerner

引用来自“Hi--ID”的评论

你好,请问第二种方式为什么可以呢?setTimeout的时间间隔设为0,为什么还是可以延迟呢?望大神赐教。

回复@Hi--ID : 第二种方式是在页面onload之后执行的,其实和第一种方式设置具体时间延迟的目的一样,都是为了避免加载页面的时候触发popState,由于时间问题,第二种方式我没实验。另外setTimeOut设置为0是为了是js代码异步执行。setTimeout是一个任务队列,这里的代码会在其他代码执行完后依次执行
H
Hi--ID
你好,请问第二种方式为什么可以呢?setTimeout的时间间隔设为0,为什么还是可以延迟呢?望大神赐教。
前端路由实现原理(history)

前端路由实现(history) 了解: HTML5 history新增了两个API:history.pushState和history.replaceState 两个api都接受三个参数 状态对象(state object):一个JavaScript对象,与用pushSta...

林晖
07/09
0
0
前端 :APP/浏览器按返回键回到指定页面

项目APP基于Cordova实现,有一个表单提交,但是不想有返回键能回到表单提交页面,所以,想要返回键返回时回到首页。 实现原理: 利用HTML5 的window.history对象实现对历史记录的访问 实现代...

临江仙卜算子
06/27
0
0
HTML5 History API

引言 HTML5 History API 为开发者提供在不刷新浏览器页面的情况下修改 URL 的能力,在这之前,如果开发者修改 url 就会全页面刷新。History API 可以让我们灵活控制浏览器地址栏线上的内容,...

musishui
2016/11/29
8
0
使用H5实现页面后退,不能触发popstate事件,求看一下是什么问题

列表页 //页面进入详情页 function goDetail(){ //前进后退操作 var dispatchOutId=$("#dispatchOutId").val(); var companyCode = $("#company").find("em").attr("value"); var truckType......

overself
05/14
0
0
如何用堆栈来保存和恢复滚动条位置

问题背景 在单页应用中,翻页一般通过display:none将先前的面板(一般就是个div容器)隐藏,然后将本次需要展现的面板设置成display:block(当然,还可能加点css切换动画,不过不影响我们本次...

程序员大白
08/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

自己手写一个 SpringMVC 框架

前端框架很多,但没有一个框架称霸,后端框架现在Spring已经完成大一统.所以学习Spring是Java程序员的必修课. Spring 框架对于 Java 后端程序员来说再熟悉不过了,以前只知道它用的反射实现的,...

别打我会飞
11分钟前
0
0
01-《Apache Tomcat 9》之文件索引

《Apache Tomcat 9》是《看Apache官方文档学英语》的第一个专栏!让我们一起在看文档的过程中学英语,在学英语的过程中夯实技术! Documentation Index - 文件索引 Introduction - 介绍 This...

飞鱼说编程
13分钟前
0
0
最近

20181016最近在熟悉业务 关于money的 要涉及到流程中转同步 这个点感觉 业务大于技术 关于业务性的内容 还是要把自己及时清零的好 我们需要好好的梳理下业务内容 业务作为导向 技术提供解决方...

JAVA码猿
22分钟前
0
0
JDK1.8HashMap源码分析

HashMap和Hashtable的主要区别是: 1. Hashtable是线程安全,而HashMap则非线程安全,Hashtable的实现方法里面大部分都添加了synchronized关键字来确保线程同步,因此相对而言HashMap性能会高...

小小明童鞋
32分钟前
15
0
以Redis为例,详谈分布式系统缓存的细枝末节

前言: 在分布式Web程序设计中,解决高并发以及内部解耦的关键技术离不开缓存和队列,而缓存角色类似计算机硬件中CPU的各级缓存。如今的业务规模稍大的互联网项目,即使在最初beta版的开发上...

Java干货分享
35分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部