微信公众号监听返回按钮(用户点击返回可以控制关闭当前页面或跳转到任意一面)

信公众号开发的时候,可能会出现这种需求:

微信公众号内指定某个网页在点击返回键时不回退到上一级,而是直接关闭微信浏览器窗口,用户点击返回按钮本身就是一个返回事件。

解决方案:利用监听返回事件window.addEventListener("popstate", function(e) {//你的逻辑}, false);

所以只需在页面调用
            onBackCloseWindow();//点击返回键时,直接退出微信浏览器

            onBackCloseWindow()有两种写法

(1)、需要微信授权


//当点击返回键时,不返回到上一页,而是直接关闭微信浏览器
function onBackCloseWindow() {
	pushHistory();
    window.addEventListener("popstate", function(e) {
        //关闭当前浏览器 //关闭当前浏览器或跳转重定向页面
        wx.closeWindow();//需微信授权
    }, false);
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }   
}

 

(2)、无需微信授权


//当点击返回键时,不返回到上一页,而是直接关闭微信浏览器
function onBackCloseWindow() {
	pushHistory();
    window.addEventListener("popstate", function(e) {
        //关闭当前浏览器或跳转重定向页面
        WeixinJSBridge.call("closeWindow");
    }, false);
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }   
}

体外阅读:添加/修改历史记录条目

1.pushState(stateObject,title,URL):

逐条添加历史记录条目,

a.状态对象(stateObject)--一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝;(ps:FireFox浏览器强行限制状态对象的大小为640k,超出则抛异常,可通过sessionStorage或localStorage存储大的数据)

b.标题(title)--传入一个简短的标题,标明将要进入的状态;(FireFox浏览器目前会忽略该参数,但是传一个空字符串会比较安全)

c.地址(URL)--新的历史记录条目的地址(可选,不指定的话则为文档当前URL);浏览器不会在调用pushState()方法后加载该地址;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。

*某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。

(拓展:window.location--待研究)

2.replaceState():

history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

3.popstate():

每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

补充:

pushState

history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录。

state(any) 需要保存的数据,这个数据在触发popstate事件时保存在event.state上。
title(string):
url(string) 需要更改的url地址。
ps:pushState 需要至少两个参数。

popstate: 浏览器点击前进后退时触发的事件。event.state可以获取当前url下设置的state。

另外获取pushState中设置的state不一定要在popstate事件中获取,直接history.state也可以拿到。
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值