popstate的自动触发问题
博客专区 > lerner 的博客 > 博客详情
popstate的自动触发问题
lerner 发表于10个月前
popstate的自动触发问题
  • 发表于 10个月前
  • 阅读 526
  • 收藏 1
  • 点赞 0
  • 评论 2

腾讯云实验室 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马上执行。这中方案自己还没试过,貌似可行!

标签: popstate
共有 人打赏支持
粉丝 0
博文 15
码字总数 3170
评论 (2)
Hi--ID
你好,请问第二种方式为什么可以呢?setTimeout的时间间隔设为0,为什么还是可以延迟呢?望大神赐教。
lerner

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

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

回复@Hi--ID : 第二种方式是在页面onload之后执行的,其实和第一种方式设置具体时间延迟的目的一样,都是为了避免加载页面的时候触发popState,由于时间问题,第二种方式我没实验。另外setTimeOut设置为0是为了是js代码异步执行。setTimeout是一个任务队列,这里的代码会在其他代码执行完后依次执行
×
lerner
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: