文档章节

popstate的自动触发问题

l
 lerner
发布于 2016/12/09 12:49
字数 417
阅读 1002
收藏 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
使用 JavaScript 修改浏览器 URL 地址栏

现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信...

oschina
2013/10/18
23.3K
39
Vue 单页应用(spa)前端路由实现原理

一文搞懂单页应用原理Vue项目History模式路由机制 源码分析VueVueRouter Vue 单页应用(spa)前端路由实现原理 写在前面:通常 SPA 中前端路由有2种实现方式: window.history location.hash...

前端攻城小牛
前天
0
0
HTML5 History API

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

musishui
2016/11/29
8
0

没有更多内容

加载失败,请刷新页面

加载更多

stylus

stylus基础教程,stylus实例教程,stylus语法总结

miaojiangmin
25分钟前
1
0
PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
今天
2
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
今天
8
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
5
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部