关于安卓手机的微信内置浏览器中页面跳转失效的问题

Write By Monkeyfly

以下内容均为原创,如需转载请注明出处。

前提

今天下午在JS前端群里有人问了一个问题:

在微信浏览器中,window.location.href这个跳转方法不能用吗?在安卓手机试过了不行,但是ios可以,这是为什么?

以下是后续的问题说明:

  • 用本地在手机浏览器中可以,但是在微信中不行,ios没问题的,只有安卓有问题。
  • 在安卓手机上的浏览器可以访问,但是微信浏览器就不行。
  • 本地测试是没问题,而且用微信开发者工具测试也是没有问题的。

问题代码如下:

这里写图片描述

因为我本身就是做微信公众号的页面开发,所以经常会处理页面之间的跳转问题,从来都没有碰到这种情况,所以果断回复:在微信的内置浏览器中,对于安卓手机来说,window.location.href这个方法肯定可以用,没有任何问题

问题分析

由于这个问题的特殊性,我只好去百度找答案了,搜索关键词:window.location.href方法在微信内置浏览器中跳转失效的问题

百度到的方法都如出一辙:

在window.location=url后面加上一个时间戳,即动态获取的一个时间参数。

即,将window.location=url改为window.location=url?+时间参数

//以下添加时间戳的方法,经过她本人测试后还是无法解决。
window.location.href = url +'?v='+ (new Date().getTime())
//不兼容安卓,增加时间或随机数
window.location.href = url +'?timestamp='+ new Date().getTime()+Math.random();

参考博文:

安卓微信浏览器中window.location.href失效的问题【选择了日期最新的一篇博文,2018年6月11日】

这就奇怪了,感觉不应该呀。

以上方法经过她本人的测试,得出一个结果:我发现不管用,页面还是不会跳转,感觉没进点击事件,都不alert()

随后,群里就有人相继发言了:

  • A:click事件存在300ms延迟的问题
  • B:移动端为什么不用touch事件
  • C:用touch啊
  • D:用tap
  • 可以自定义一个事件代替它 就好了(果然是大佬)

以下是大佬给的图
这里写图片描述

接下来:

  • 然后,她就准备去试试群友提供的方法:换掉click事件
  • 测试过后,又有了新的结果:好像真的是click的原因啊,就是因为click事件导致的
  • 随后,我问她:你是怎么修改的?
  • 她回答道:用tap就好了
  • 我反问道:不应该是touch事件吗?
  • 她说:用的mui框架,里面有封装好的tap事件。
  • 我说:嗯嗯,问题解决了就行,我也是第一次碰到这种情况。

说明:
(1)随着触屏设备的普及,w3c为移动端web新增了touch事件。

  • 【传送门】移动端web开发—Touch事件详解 - CSDN博客

(2)mui框架第一次听说,也没有用过,顺便去查了一下。

  • 【传送门】MUI-最接近原生APP体验的高性能前端框架

    mui框架有三大特点:
    1、轻量。MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K
    2、原生UI。MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件
    3、流畅体验。下拉刷新、侧滑导航、滑动触发操作菜单

下面就是她所说的mui框架中封装好的tap事件了。
这里写图片描述

特别搞笑的是:

mui这个词一出来,群里就出现了以下精彩的对话:

  • A:mui好难用呀!文档不全,你们觉得呢?
  • B:我都用layui 文档友好
  • C:自己写就行了,不用什么ui框架(我自己说的)
  • D:mui是啥啊?小米的系统么?
  • E:不是,它是手机的ui库
  • D:哈哈,我傻了,小米那个叫miui
  • F:哈哈哈!小米手机用多了吧
  • D:我还以为你们都开始开发miui了
  • G:没毛病,mui的作者说不定是miui fan呢

结束语

至此,该问题就已经解决完了。归根到底就是在移动端click点击事件的问题。

在手机WEB端,click事件会有 200~300 ms的延迟时间,所以请用tap或者touch代替click作为点击事件。

click事件300ms延迟问题的由来

  • 2007年第一代iphone发布,由于那个年代所有的网页都是针对大屏的pc端设计的,iphone的Safari浏览器为了让用户浏览网页的时候可以浏览到整个网页,把viewport设置为960px(参考前面的文章),好是好,但是由于缩放了整个页面,导致内容变得非常小,视力6.0的都不一定看得清楚。
  • 所以Safari浏览器自带了一个当时看起来相当酷的一个功能:双击缩放。你双击页面的时候,浏览器会智能的缩放当前页面到原始大小。
  • 双击缩放的原理就是,当你click一次之后,会经过300ms之后检测是否再有一次click,如果有的话,就会缩放页面。否则的话就是一个click事件。
  • ​所以,当你想执行click操作的时候,就感觉到了”卡顿”。如果点击之后100ms之后没有反应,基本就有卡顿的感觉。

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

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

相关文章

安卓页面的跳转(按钮点击跳转、自动跳转)

一.创建新页面 在eclipse中建立安卓工程后,默认会有一个页面MainActivity,要实现多个页面的跳转,首先需要建立新的页面 在eclipse建立新的页面过程如下: 要添加的新页面的工程下src 右键---->New—>Other—>选择Android…

安卓跳转按钮的闪退问题

不知道为什么 跳转按钮有时可以跳转有时会闪退 程序并没有报错,求大神指导! 闪退的次数特别多!

android app跳转到微信

今天写这片文章主要是记录下 app跳转到微信的实现方法,我的项目需求是跳转到微信公众号,由于微信官方关闭了这个直接可以跳到公众号的接口,只能 从app打开微信,让用户自己去搜索。 我的项目需求: 点击跳转微信的时候&…

Android页面跳转(Intent)

Android 意图的使用(Intent) 显式四种跳转方式一二三四布局代码效果 隐式意图和隐式意图的跳转Intent概述Action属性Data属性Category属性按home键时启动自己做的应用 Component属性Extra属性(重点)Bundle传递序列化对象 Type属性…

安卓——Intent(实现页面跳转的两种方法)

下图中两个不同的方法就是两种页面之间跳转的情况 1>跳转不返回数据 2>跳转返回数据 实例: 第一种启动方式(跳转不返回数据) 第二种启动方式(跳转返回数据) 先看第一种: 点击第一种启动方式按钮…

【安卓开发】安卓页面跳转

目录 一、如何添加一个页面(activity)二、如何实现页面的跳转二、页面跳转传参1. 方式一2. 方式二安卓线程实现页面跳转安卓创建一个线程 三、Activity(页面)的生命周期 一、如何添加一个页面(activity) 1. 右键 src …

安卓app之页面跳转

手动跳转 1.打开eclipse,New一个安卓工程 后面一直next,知道出现以下界面说明项目创建成功 2.添加第二个页面 一直next,直到出现以下界面 修改 Activity Name ,点击Finish,页面添加成功 点击 AndroidManifest.xml 可…

大咖说·对话开源|与Tapdata论道数据技术开放生态

一个良好的开源生态具有哪些特征?开源与商业一定是对立的吗?开源产品应该如何做好商业化? 一个良好的开源生态具有哪些特征?开源与商业一定是对立的吗?开源产品应该如何做好商业化?本期大咖说,阿…

中奖名单公布

阅读本文大概需要 1.8 分钟。 头条今天的推送是恰饭文章,但确实觉得很不错,觉得靠谱才会推荐,感兴趣的可以参与下,反正免费的,不感兴趣忽略就好。 那个,先说声不好意思,五月份的收租抽奖我一直以…

纪录篇 之 我收集整理的一些网址(不断更新 ing)

LZ-Says:路漫漫其修远兮,吾将上下而求索。 前言 起初,不知道写博文是为了什么。 现在,点滴记录,为了更好的明天。 未来,只是为了证明这个世界我来过。 写这篇文章的前提,或者说诱发因素如下…

三金叉见底

三金叉见底 三金叉买入,三死叉止损 技术指标作为一种参考工具,在不同人的眼里会有不同的研判结 果。投资者不应该单以一项指标的讯号而对行情作出绝对的判断,因 为指标所起的只是一种辅助的作用而不是绝对的作用。如果采用多种 指标可以增加…

程序员的人生规划

展望未来,总结过去10年的程序员生涯,给程序员小弟弟小妹妹们的一些总结性忠告。 走过的路,回忆起来是那么曲折,把自己的一些心得体会分享给程序员兄弟姐妹们,虽然时代在变化,但是很可能你也会走我已经做…

第四周周赛——三金三银两铜+签到

A——HDU 5974 A Simple Math Problem <-题目链接 签到题 Given two positive integers a and b,find suitable X and Y to meet the conditions:XYaLeast Common Multiple (X, Y) bInput Input includes multiple sets of test data.Each test data occupies one lin…

工作十年的程序员,却拿着毕业三年的工资……

工作十年的程序员&#xff0c;却拿着毕业三年的工资…… 导语&#xff1a;小韩是一家小公司的软件程序员&#xff0c;而十年后他还在那家公司&#xff0c;依然是一名普通的程序员。算起来&#xff0c;他工作也有十多年了&#xff0c;但是&#xff0c;他却告诉我&#xff0c;他…

孙杨事件的几点事实!

阅读本文大概需要 3.3 分钟。 昨天一个最爆炸的消息&#xff0c;莫过于孙杨被国际体育仲裁法庭禁赛 8 年的判决。 毫无疑问&#xff0c;孙杨是继姚明、刘翔时代之后&#xff0c;在国际体坛影响力最大&#xff0c;人气最高的一位中国体育名将了&#xff0c;所以&#xff0c;无数…

AI领域最有影响力100人,Hinton只排31、Bengio竟然没有上榜?

2021-01-22 00:42:54 作者 | 耳洞打三金 大家好我是三金&#xff0c;今天又是开开心心的一天&#xff0c;如题目和上图所示&#xff0c;我今天在上班摸鱼的时候发现了这样一份号称是“AI领域最有影响力的100人”的榜单。 这可把我给吓了一跳 &#xff0c;我赶紧把这个榜单从头…

谷歌最新提出无需卷积、注意力,纯MLP构成的视觉架构!网友:MLP is All You Need?

2021-05-06 15:50:28 作者 | 耳洞打三金、琰琰 近日&#xff0c;谷歌大脑团队新出了一篇论文&#xff0c;题目为《MLP-Mixer: An all-MLP Architecture for Vision 》&#xff0c;这篇论文是原视觉Transformer&#xff08;ViT&#xff09;团队的一个纯MLP架构的尝试。 本文总…

抖音快速涨粉之抖音用户数据分析

抖音是一款专注于新生代的音乐创意短视频App&#xff0c;提供给年轻人群。截至2020年10月&#xff0c;抖音国内日活跃用户数突破2亿&#xff0c;国内月活跃用户数突破6亿。足迹遍布全世界233个国家和地区&#xff0c;已然成为短视频行业的巨头&#xff0c;行业内有南抖音北快手…

竞品分析—抖音PK快手

1、交互设计方面&#xff1a;进入抖音时&#xff0c;便直接观看视频&#xff0c;抖音通过“向上滑”动作完成视频切换&#xff0c;操作十分流畅&#xff0c;将用户的观赏体验放大到极致。反观快手则通过封面页组成的瀑布流&#xff0c;用户通过浏览找到自己感兴趣的视频进入&am…

怎么让抖音快速涨粉之抖音数据分析

怎么让抖音快速涨粉之抖音数据分析 2020年年初的疫情&#xff0c;让大量门店商家意识到&#xff0c;一味注重发展线下生意&#xff0c;遇到突发事件时抗风险能力将会很差&#xff0c;所以在疫情缓和后&#xff0c;有不少企业都开始注意发展线上的经营渠道&#xff0c;如抖音、快…