Web 游戏监听浏览器返回点击事件 !

引用场景

    做 web 游戏时,通常游戏是嵌入到 app 内部,通过 app 内部入口,跳转进入所开发的 web 游戏,app 内会预留返回功能,web 游戏可以使用 webview 自带的返回,实现游戏内不同场景的跳转。

    比如游戏内有 a、b、c 三个场景,其中 a 场景是启动页面,a 场景进入 b 场景,b 场景进入 c 场景,从 c 场景中点返回,回到 b 场景,从 b 场景中点击返回,回到 a 场景, 从 a 场景中点击返回,调用 webview自身的返回事件。最后的效果如下图:

事件监听

    当浏览器活动历时记录条目更改时,将触发 popstate 事件,如用户点击浏览器的回退按钮,或者在 javascript 代码中调用 history.back() 或者 history.forward() 方法,所以只需要在需要监听事件的场景

window.addEventListener('popstate', 
  e => {
      //添加点击返回处理逻辑
  },
  false
);

事件的消费和添加

    仅仅监听事件,还是不够的,虽然写了监听逻辑,但是浏览器本身的返回事件还是触发的,这时候点击返回,还是会继续回到之前页面,所以需要添加一个新的状态,让浏览器不跳转到前一个页面,就需要用到 history.pushState() 方法。

    history.pushState() 方法,是向当前浏览器会话的历史堆栈中添加一个状态 (state) ,添加以后,点击浏览器的返回,会消耗掉会话历史堆栈中栈顶的状态,也就是我们注册的最新的状态。

let state = { 
    title: "title", 
    url: null
}; 
window.history.pushState(state, "title", null);

其中 title 是标题,目前浏览器基本上是忽略这个参数,可以不管,url 是跳转地址,游戏内不需要跳转其他地址,直接传 null 即可。

事件的全局控制

使用 cocos creator 开发游戏,注册 popstate 监听事件后,在浏览器点击返回时,会在每个注册的位置触发,实际游戏场景中,只需要执行一次就够。

比如有 3 个游戏场景 a、b、c,从 a 中点击进入 b,从 b 中点击进入 c,b 和 c 内都注册了事件,这时候如果 b 和 c 分别直接注册,都会触发,导致界面显示出错。

像上述场景,就需要整体控制事件的添加和注册,每次添加事件和注册回调,放置到一个堆栈顶部,当事件触发时,从栈顶取出最新的一个,进行回调就行。

export default class PopStateMgr{
    /**
     * @desc: 注册返回事件
     * @param {type} 
     * @return: 
     */
    static push(onBackClick:any){
        PopStateMgr._events.push(onBackClick);
        let state = { 
            title: "title", 
            url: null
        }; 
        window.history.pushState(state, "title", null);
        window.addEventListener('popstate', 
            e => {
                PopStateMgr._onBackClick();
            },
            false
        );
    }


    private static _onBackClick(){
        if(PopStateMgr._events.length <= 0){
            return;
        }


        let func = PopStateMgr._events.pop();
        if(func != null){
            func();
        }
    }


    private static _events:any[] = [];
}

类似上面这种,在需要监听返回事件的场景脚本组件内,调用 push 及触发的回调事件就行。如本实例中,就在 b 场景开始时,调用 push 注册事件。

实例代码

扫码关注公众号,发送【web返回】获取实例代码!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在Web开发中,经常需要通过JavaScript监听浏览器关闭和刷新事件。可以使用window对象的beforeunload和unload事件来实现这个功能。 beforeunload事件会在用户要关闭页面时触发,可以用来在用户离开前提示一些消息。可以通过window.onbeforeunload属性来绑定beforeunload事件处理程序。 当用户点击确定按钮时,页面将被关闭,如果用户点击取消按钮,则页面将保持不变。在beforeunload事件处理程序中,可以通过返回一个非空字符串来提示用户需要保存的未完成操作。 unload事件会在页面完全卸载后触发,可以用来清除一些资源,例如定时器和事件监听器等。可以通过window.onunload属性来绑定unload事件处理程序。 需要注意的是,对于浏览器关闭事件,不同的浏览器有不同的支持方式和行为,因此,在实现监听浏览器关闭和刷新事件时,需要进行兼容性测试,以保障其在不同的浏览器中的稳定性和可靠性。 总的来说,通过使用 JavaScript 监听浏览器关闭和刷新,可以处理一些必要的业务逻辑,从而提升用户体验和应用稳定性。 ### 回答2: JavaScript 可以监听浏览器关闭和刷新等事件,以促进更好的用户体验。这些事件通常是用户主动进行的,但也有可能是浏览器崩溃或其他不可预测的情况引发的。 要监听浏览器关闭事件,可以使用 window.onbeforeunload 事件。这个事件将在浏览器窗口将要关闭之前触发。可以将要执行的代码放在这个事件的回调函数中,以便在用户关闭浏览器时执行。 要监听浏览器刷新事件,可以使用 window.onbeforeunload 事件和 window.onload 事件。在页面加载时,window.onload 事件会被触发。然后,如果用户刷新了页面,window.onbeforeunload 事件会在页面重新加载之前被触发。可以使用这些事件来保存当前页面的状态,并在页面重新加载时恢复状态。 要注意的是,浏览器的不同版本和不同设置可能会影响这些事件的行为。有些浏览器可能不允许在 onbeforeunload 事件中弹出警告框或确认框,而有些浏览器则可以。因此,需要谨慎处理这些事件,并确保它们不会对用户造成不必要的干扰或安全风险。 综上所述,JavaScript 监听浏览器关闭和刷新事件可以帮助我们提供更好的用户体验,并确保我们的网站和应用程序在这些情况下仍然能够正常使用。 ### 回答3: JS 监听浏览器关闭或刷新是 Web 开发中比较常见的需求,主要涉及到浏览器事件监听和处理。比如在某些场景下,当用户关闭浏览器或刷新页面时,需要提醒用户或执行一些特定的操作。 浏览器关闭事件监听JS 监听浏览器关闭主要通过 `window` 对象提供的 `beforeunload` 事件来实现。`beforeunload` 事件浏览器卸载页面之前被触发,可以用来防止用户误操作或提醒用户保存数据。 例如,在页面中添加以下 JS 代码,就能监听浏览器关闭事件: ``` window.addEventListener('beforeunload', function(event) { event.preventDefault(); return event.returnValue = '确定离开此页面吗?'; }); ``` 上述代码中,我们使用 `addEventListener` 方法绑定了 `beforeunload` 事件监听器。在事件回调函数中,我们使用 `event.preventDefault()` 方法来阻止浏览器默认的关闭行为,并返回一个提示用户的字符串,如果用户确认离开页面,才能真正关闭页面。 浏览器刷新事件监听JS 监听浏览器刷新主要通过 `beforeunload` 和 `unload` 事件组合使用实现。当用户刷新页面时,会先触发 `beforeunload` 事件,然后触发 `unload` 事件。 例如,在页面中添加以下 JS 代码,就能监听浏览器刷新事件: ``` window.addEventListener('beforeunload', function(event) { // Do something before refreshing }); window.addEventListener('unload', function(event) { // Do something after refreshing }); ``` 上述代码中,我们分别使用 `addEventListener` 方法绑定了 `beforeunload` 和 `unload` 事件监听器,并在事件回调函数中分别执行了特定的操作。 需要注意的是,由于 `beforeunload` 事件可以阻止浏览器关闭或刷新页面,因此在使用它时需要谨慎考虑,以避免影响用户体验和引起安全问题。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值