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

最新推荐文章于 2022-08-18 09:46:42 发布

好好的浩浩

最新推荐文章于 2022-08-18 09:46:42 发布

阅读量3.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/ruihaol/article/details/78003868

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这个部分需要用到三个东西：

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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
微信公众号网页开发监控手机后退并关闭页面到主页

这个部分需要用到三个东西：history.pushStatewindow.onpopstate微信内置浏览器JS：WeixinJSBridge.call('closeWindow');你可以在最后一个（需要点击返回退出浏览器的）页面载入的时候借助 history.pushState 保存下两个状态：history.pushState({page : 's
复制链接

扫一扫