文档章节

popstate的自动触发问题

l
 lerner
发布于 2016/12/09 12:49
字数 417
阅读 751
收藏 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
博文 15
码字总数 3170
作品 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切换动画,不过不影响我们本次...

程序员大白
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day60-20180818-流利阅读笔记-待学习

钉钉:工作的归工作,生活的…也归工作? 毛西 2018-08-18 1.今日导读 你用过“钉钉”么?被公司要求使用钉钉的感受是如何的呢?这款阿里巴巴旗下的移动办公社交平台在弯道超车微信、为许多企...

aibinxiao
48分钟前
6
0
Kubernetes的HTTPS和证书问题,汇总

通过Kubernetes建立服务网站,需要干的事情和HTTPS和证书问题,汇总如下: 建立Nginx服务器 搞服务器第一步,Ubuntu 18.04设置静态IP 安装Nginx服务。 Kubernetes的deployment使用 创建服务,...

openthings
今天
2
0
php 使用redis锁限制并发访问类

1.并发访问限制问题 对于一些需要限制同一个用户并发访问的场景,如果用户并发请求多次,而服务器处理没有加锁限制,用户则可以多次请求成功。 例如换领优惠券,如果用户同一时间并发提交换领...

豆花饭烧土豆
今天
0
0
Linux环境搭建 | 手把手教你配置Linux虚拟机

在上一节 「手把你教你安装Linux虚拟机」 里,我们已经安装好了Linux虚拟机,在这一节里,我们将配置安装好的Linux虚拟机,使其达到可以开发的程度。 Ubuntu刚安装完毕之后,还无法进行开发,...

良许Linux
今天
0
0
(三)Nginx配置·续

概述 前文写了关于Nginx环境配置,但是还没有完,接下来将会继续讲三个相关的配置 主要是以下三个 1.Nginx访问日志 2.Nginx日志切割 3.静态文件不记录日志和过期时间 Nginx访问日志 1.先看看...

杉下
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部