基于微信生态的物理返回键与前进键监听方法

前言
手机浏览器环境和一般web网站的环境相比，有许多不同点，一是，手机浏览器限制较多，经常有特殊状况需要我们通过其它手段变通完成需求。二是，如今微信的用户群庞大，很多网页开发人员都必须兼顾微信平台上的兼容性，而在微信公众号或小程序中开发网页，便存在物理返回和前进键的监听问题，依靠传统的js事件监听并不生效，这里有几个方法，能够解决该问题，本文就来分析一下各种方法的优劣。

方法一、监听浏览器历史记录的变化

浏览器提供了popstate接口，可以监听浏览器历史记录的变化，当历史记录发生变化时，会触发popstate事件。但问题是，这个事件不兼容微信，也并不支持物理返回键。

方法二、结合pushState方法实现

微信会将非微信域名的页面都配置为sandbox模式，此模式限制了页面的操作，pushState作为历史状态管理的API也受到限制。我们可以利用pushState的特性，当用户点击前进或后退按钮时，在新的状态中加入一个参数，然后在popstate事件中根据参数来判断用户是点击了前进还是后退按钮。pushState方法可以修改历史记录，并将URL推入历史记录栈，当用户使用前进或后退按钮时，浏览器会触发popstate事件，同时可以在popstate事件的处理函数中获取到当前的历史状态对象，从而判断用户是点击了前进还是后退按钮。利用此特性，我们也可以实现监听返回和前进键，但不支持返回首页。

方法三、监听Android物理返回键

对于物理返回键的监听，在Android系统中，可以使用event.keyCode === 4来判断用户是否点击了物理返回键，但此方法不兼容iOS。

方法四、使用第三方库

由于原生方法无法很好的解决物理返回键和前进键的监听问题，很多开发者会借助第三方库。在微信中，就有许多监听返回和前进键的库，比如：

• 微信物理返回键监听
• 微信物理返回和前进键监听

总结

手机浏览器监听物理返回键和前进键，是移动端开发中经常遇到的问题，由于浏览器的兼容性和微信的特殊性，使得监听物理返回键和前进键变得困难，以上四种方法分别从不同的角度提供了解决方案，开发者可以根据自己的实际情况选择合适的方法。

综上，这四种方法都可以实现物理返回键和前进键的监听，但各有优劣。开发者可以根据自己的实际情况选择合适的方法。

结语

在移动端开发中，监听物理返回键和前进键是一个常见需求。随着移动端设备和浏览器的不断发展，监听物理返回键和前进键的方法也在不断更新，开发者需要根据自己的实际情况选择合适的方法。