文档章节

popstate的自动触发问题

l
 lerner
发布于 2016/12/09 12:49
字数 417
阅读 676
收藏 1
点赞 0
评论 2

前段时间,因为项目需要,需要监听微信的返回按钮,于是用到了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,为什么还是可以延迟呢?望大神赐教。
HTML5 History API

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

musishui ⋅ 2016/11/29 ⋅ 0

使用H5实现页面后退,不能触发popstate事件,求看一下是什么问题

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

overself ⋅ 05/14 ⋅ 0

微信开发的一些问题

1、Android微信不支持flex布局: 参考:http://segmentfault.com/q/1010000003409405 提供的解决办法无非两种: a)新版webkit和旧版webkit混合flex写法; b)flex子元素需要displ:block; 本人...

Reya滴水心 ⋅ 2016/01/07 ⋅ 0

如何让搜索引擎抓取AJAX内容

越来越多的网站,开始采用"单页面结构"(Single-page application)。   整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容。 这种做法的好处是用户体验好、节省流量,...

德拉费尔 ⋅ 2013/07/17 ⋅ 0

学习React-router 4.x版本

这几天闲下来想开发我个人网站的极客教程的移动web版本,然后发现之前弄的开发移动web的环境过于老旧,于是重新弄了个结合现在最新的相关库的环境,相关文章可以看搭建我的网站的mobile版的开...

极客教程 ⋅ 2017/10/20 ⋅ 0

bom的总结3:history对象

history对象 history对象保存着用户的上网记录,使用go()方法可以在上网记录中前进后退: 1.基本操作 2. history.pushState 3.history.replaceState 4.history.state属性 5.popstate事件 6....

小熊94 ⋅ 01/14 ⋅ 0

使用pushState实现微信“返回”按钮控制单页应用页面的无刷新跳转

相信很多微信开发者都会遇到过这样的问题:为了提高用户体验,把多个页面内容放在一个HTML页面进行展示,通过display属性以及transition动画来实现页面的跳转动画,但是点击微信顶部的“返回...

Simon_ITer ⋅ 2016/10/17 ⋅ 7

《解决微信内置浏览器返回上一页强制刷新问题方法》

微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验。而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚...

cccyb ⋅ 2016/10/17 ⋅ 0

如何让搜索引擎抓取AJAX内容?

越来越多的网站,开始采用"单页面结构"(Single-page application)。 整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容。 这种做法的好处是用户体验好、节省流量,缺点...

阮一峰 ⋅ 2013/07/16 ⋅ 0

Ajax局部页面刷新和history

原文地址(可能需要翻墙) ajax在现代网站已经得到非常普遍地应用,主要的好处大家都知道(异步加载数据,不用刷新整个浏览器,更小的数据传输尺寸)。对于那些老网站或者老项目来说全盘改造...

jarchan ⋅ 2014/12/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CENTOS7防火墙命令记录

安装Firewall命令: yum install firewalld firewalld-config Firewall开启常见端口命令: firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-po......

cavion ⋅ 52分钟前 ⋅ 0

【C++】【STL】利用chromo来测量程序运行时间与日志时间打印精确到微秒

直接上代码吧,没啥好说的。头疼。 #include <iostream>#include <string>#include <ctime>#include <sstream>#include <iomanip>#include <thread>#include <chrono>using ......

muqiusangyang ⋅ 55分钟前 ⋅ 0

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简...

故久呵呵 ⋅ 今天 ⋅ 0

破解公司回应苹果“USB限制模式”:已攻破

本周四,苹果发表声明称 iOS 中加入了一项名为“USB 限制模式”的功能,可以防止 iPhone 在连接其他设备的时候被破解,并且强调这一功能并不是针对 FBI 等执法部门,为的是保护用户数据安全。...

六库科技 ⋅ 今天 ⋅ 0

MyBtais整合Spring Boot整合,TypeHandler对枚举类(enum)处理

概要 问题描述 我想用枚举类来表示用户当前状态,枚举类由 code 和 msg 组成,但我只想把 code 保存到数据库,查询处理,能知道用户当前状态,这应该怎么做呢?在 Spring 整合MyBatis 的时候...

Wenyi_Feng ⋅ 今天 ⋅ 0

synchronized与Lock的区别

# <center>王梦龙的读书笔记第一篇</center> ## <center>-synchronized与Lock的区别</centre> ###一、从使用场景来说 + synchronized 是能够注释代码块、类、方法但是它的加锁是和解锁使用一......

我不想加班 ⋅ 今天 ⋅ 0

VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址...

大美琴 ⋅ 今天 ⋅ 0

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 今天 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 今天 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部