微信内置浏览器点击“返回”关闭窗口

场景:开发微信内的H5活动,需要进行微信授权,我们采用的是在一个静态页面(只有js,所以是个空白页面)内进行授权,授权后再跳转到活动主页。

客户需求:从活动主页返回时不显示这个授权页面(空白页面),直接退出。

解决方案:(方案一为踩过的坑;方案二为放在前端处理的方案)

方案一:(不可行

直接监听需要关闭窗口的页面的返回事件来关闭窗口。示例代码:

 1 pushHistory();
 2         window.addEventListener("popstate", function (e) {
 3             WeixinJSBridge.call('closeWindow');
 4         }, false);
 5         function pushHistory() {
 6             var state = {
 7                 title: "title",
 8                 url: "#"
 9             };
10             window.history.pushState(state, "title", "#");
11         }

此方案存在的bug:在微信内置浏览器内该事件会继承到子页面(需要关闭窗口的页面为主页面,在主页面跳转到的其他页面称为子页面),在子页面点击返回也会关闭窗口。(暂未找到原因所在,如有大牛解决,欢迎留言指导~)

方案二:(可行

在方案一的基础上优化,加入session判断当前页面是否为需要关闭窗口的页面。示例代码:

 1      sessionStorage.setItem('key', 1);

       pushHistory(); 2 window.addEventListener("popstate", function (e) { 3 if(sessionStorage.getItem('key') != 1) { 4 sessionStorage.setItem('key', 1); 5 } 6 if(sessionStorage.getItem('key') == 1) { 7 document.addEventListener('WeixinJSBridgeReady', function(){ WeixinJSBridge.call('closeWindow'); }, false);  8 WeixinJSBridge.call('closeWindow'); 9 parent.WeixinJSBridge.call('closeWindow');//网上有人认为微信内置浏览器和本地开发测试的环境不一样,微信内部是采用iframe方式加载页面的(暂未得到考证),所以我采用了两种方式都写的兼容写法 10 } 11 12 }, false); 13 function pushHistory() { 14 var state = { 15 title: "title", 16 url: "#" 17 }; 18 window.history.pushState(state, "title", "#"); 19 }
思路:将主页面(需要关闭窗口的页面)的key值设为1,子页面(从主页面跳转到的其他页面)的key值设为其他任意值,判断key值是否为1,为1的时候点击返回再关闭窗口。(注意:每次进到主页面的时候都要将key值重置为1。
   因为session的生命周期是当前窗口,从其他页面子页面回到主页面会改变key)
方案三:(替换方案
在授权页面加入活动方的宣传广告,避免空白。
方案四:(最优方案
微信授权放在后台进行,这样就不会存在这个授权页面,也就不用去考虑会出现空白的问题了。

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362535.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

dhl:mvc用户登陆身份验证

登录:[HttpPost]public ActionResult LoginSuccess() {bool rememberMe Request["rememberMe"].Contains("true"); UserAccount account ia.GetUserAccountByUserName(brief.UserName);//验证成功string usercookie account.UIN ",&qu…

基于上下文的访问控制

拓扑图 配置步骤 1配置端口ip地址,并检测连通性 服务器 ping pc端 服务器 telnet R3 2配置命令 R3(config)# ip access-list extended go R3(config-ext-nacl)# deny ip any any //此ACL目的是隔绝外网流量 R3(config-ext-nacl)# exit R3(config)# interface s0…

使用Gradle将JAR工件发布到Artifactory

因此,我浪费了一两天(投资)只是为了了解如何使用Gradle将JAR发布到本地运行的Artifactory服务器。 我使用Gradle Artifactory插件进行发布。 我迷失了无穷循环,包括各种版本的各种插件和执行各种任务。 是的,我之前阅读…

js 基础

1.注释 css: /* 这是一行单行注释 *//* 这个注释分散 在了多个物理 行上面 */  html: <!-- 注释内容 -->  JS: // 2.<a>标签中导航到同一个界面的不同位置  <p><a href"#C4">查看 Chapter 4。</a></p> <h2><…

Combox使用的一些技巧

这些天做一个小型的CMS&#xff0c;也就几张表&#xff0c;用WCFLINQ2SQLSilverlight这种方式开发的&#xff0c;对最常用的控件如DataGrid,DataForm以及Toolkit里其它一些控件的用法有了一定的了解&#xff0c;同时参照JV9的教程&#xff0c;把Silverlight里的验证机制仔细的学…

HTML+css实现的效果

一、鼠标划过效果 1. 类似电子书的图书效果2. 绝对定位实用案例 二、锚点的应用 三、css精灵&#xff08;图片整合&#xff09; 用一张图片写出一串电话号码用一张图片写出导航栏的滑动效果 四、后台管理布局 单飞布局双飞布局后台页面管理布局 五、css3部分 在一个div…

[LeetCode] Longest Substring Without Repeating Characters 最长无重复字符的子串 C++实现java实现...

最长无重复字符的子串 Given a string, find the length of the longest substring without repeating characters. Example 1: Input: "abcabcbb" Output: 3 Explanation: The answer is "abc", with the length of 3. Example 2: Input: "bbbbb&qu…

限制input 内部字数

当输入字数多于限定值后&#xff0c;输入框显示不出来多出的字符 对于input来说&#xff0c;innerHTML 不能查询和更改&#xff0c;只能用value 来 size 属性规定输入字段的宽度 size 属性定义的是可见的字符数 <html> <body> <input type"text" on…

使用自动机的Lucene新的邻近查询

最简单的Apache Lucene查询TermQuery匹配包含指定术语的任何文档&#xff0c;无论该术语出现在每个文档中的何处 。 使用BooleanQuery可以将多个TermQuery组合在一起&#xff0c;并完全控制哪些术语是可选的&#xff08; SHOULD &#xff09;和哪些是必需的&#xff08; MUST &…

很口语blood-aholic

很口语blood-aholic blood-aholic 嗜血。aholic可译为&#xff1a;工作狂posted on 2010-10-22 22:32 Johnny_Z 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/Johnny_Z/archive/2010/10/22/1858752.html

关于HTML的面试题-html4/css2篇

1. 什么是HTML&#xff1f;2. 用过什么调试器&#xff08;浏览器&#xff09;&#xff0c;编辑器&#xff1f;3. HTML4.0 和 HTML5.0 的区别&#xff1f;4. 手写 HTML 代码5. 元素类型有哪些&#xff08;display有哪些属性&#xff09;&#xff1f;块元素、行元素和行内块元素的…

二阶段冲刺(五)

昨天通过查询fragment&#xff0c;得到另一种使用方法&#xff0c;那就是一旦图表初始化之后就不再重新加载。但自己画的饼状图太麻烦了&#xff0c;我决定换一种思路。 今天我要使用github上开源的Android画图工具&#xff1a;MPAndroidChart。 转载于:https://www.cnblogs.co…

Java EE:异步构造和功能

介绍 Java EE具有许多API和构造以支持异步执行。 从可伸缩性和性能的角度来看&#xff0c;这是至关重要的。 让我们假设2个模块相互交互。 当模块A &#xff08;发送方&#xff09;以同步方式向模块B &#xff08;接收方&#xff09;发送消息时&#xff0c;通信将在单个线程的…

用 JA Transmenu 模块做多级弹出菜单

转自http://www.joomlagate.com “弹出菜单”这个说法本来不规范&#xff0c;尽管你我都明白这是什么意思&#xff0c;而实际上我们所理解的那个菜单样式英文说法是“Slide Menu”&#xff08;滑动菜单&#xff09;&#xff0c;如果要用“弹出菜单”就成了“Popup Menu”。当然…

webpack入门 --初级压缩

1、新建一个文件夹&#xff0c;再初始化npm&#xff1a; npm init 2、安装webpack&#xff0c;首先要全局安装&#xff0c;再本地安装&#xff1a; npm install webpack -g // 全局安装 npm install webpack-cli -g npm install --save-dev webpack 3、建一个文件&#x…

模块和包

在计算机程序的开发过程中&#xff0c;随着程序代码越写越多&#xff0c;在一个文件里代码就会越来越长&#xff0c;越来越不容易维护 为了编写可维护的代码&#xff0c;我们把很多函数分组&#xff0c;分别放到不同的文件里这样&#xff0c;每个文件包含的代码就相对较少&…

关于HTML的面试题-html5/css3篇

1. html5 新增标签有哪些&#xff08;或者新增的语义标签&#xff09;&#xff1f;2. HTML5 中有哪些新特性&#xff1f;3. 视频有哪几种格式&#xff1f;这几种格式有什么区别&#xff1f;4. 写出你知道的层级选择符&#xff08;结构性伪类选择器&#xff09;5. 什么是渐进增强…

鳞翅目动物的诅咒:玩java.time

流行测验&#xff1a;这个小程序的输出是什么&#xff1f; public class DateFun {public static void main(String[] args) {long hours getHoursOfDay(LocalDate.now(), ZoneId.systemDefault());System.out.println(hours);}private static long getHoursOfDay(LocalDate …

jq 方法函数(淡入淡出,查找元素,过滤)遍历

淡入淡出&#xff1a;fadeIn fadeOut fadeToggle fadeTo 淡入&#xff1a;fadeIn&#xff08;speed[,callback]&#xff09; 速度和回调函数 回调函数可以写匿名函数&#xff0c;或者方法名不加括号。 speed 为‘slow’或 1000 毫秒数不加引号 淡出&#xff1a;fadeOut …

Elasticsearch的用例:灵活的查询缓存

在前两篇有关Elasticsearch用例的文章中&#xff0c;我们已经看到Elasticsearch 可用于存储甚至大量文档 &#xff0c;并且我们可以通过Query DSL使用Lucene的全文功能访问那些 文档 。 在这篇较短的文章中&#xff0c;我们将把两个用例放在一起&#xff0c;以了解读取繁重的应…