微信公众号网页开发监控手机后退并关闭页面到主页

来源：互联网发布：网络舆情与网络舆论编辑：程序博客网时间：2024/05/22 08:07

这个部分需要用到三个东西：
history.pushState
window.onpopstate
微信内置浏览器JS：WeixinJSBridge.call('closeWindow');
你可以在最后一个（需要点击返回退出浏览器的）页面载入的时候借助 history.pushState 保存下两个状态：
history.pushState({page : 'state1'},'state','#state1');history.pushState({page : 'state2'},'state','#state2');
然后监听返回按钮的点击事件（事实上就是出发了浏览器的历史记录变动事件），当监听到用户点击返回按钮时执行类似下面的函数，调用微信内置JS函数WeixinJSBridge.call('closeWindow'); 关闭浏览器，即可完成用户点击返回按钮退出微信浏览器的操作。：
window.onpopstate = function(event) {      if (event.state.page === 'state1') {        WeixinJSBridge.call('closeWindow');      }    }
java ee开发页面如下
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %><!DOCTYPE HTML><%    String path = request.getContextPath();    String basePath = request.getScheme() + "://"            + request.getServerName() + ":" + request.getServerPort()            + path + "/";%><base href="<%=basePath%>"><html lang="zn-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <title>出错了</title>    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>    <link rel="stylesheet"href="css/service.css">    <script type="text/javascript" src="js/exit.js"></script></head><script type="text/javascript">    history.pushState({page : 'state1'},'state','#state1');    history.pushState({page : 'state2'},'state','#state2');    window.onpopstate = function(event) {        if (event.state.page === 'state1') {            WeixinJSBridge.call('closeWindow');        }    }</script><body><div class='nonetwork'>    <img src='img/nonetwork.png'>    <h3>抱歉！当前会话已过期</h3>    <h3>请重新打开页面</h3></div></body></html>
点击手机的后退按钮，则关闭该页面到公众号主页

阅读全文

0 0