使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办


Posted in Javascript onJanuary 04, 2016

相关阅读:微信支付如何实现内置浏览器的H5页面支付

情景再现:

      正当开心地收拾东西准备下班的时候,测试部的姑娘跑过来提了一个bug: “在iphone下,点击下拉框出现页面乱跳转现象,安卓机并没有这个问题。而跳转的页面刚好是底部菜单的几个页面。”由于项目比较急,小编只能乖乖留下解决问题。再次测试之后,小编逐一排查了可能性原因(正式版和测试版代码不一致,页面HTML代码错乱,css代码错误),但都未能解决问题。一个简单的select,怎么就出现问题了呢?百思不得其解。(至今也没有找到问题根源)

      找不出问题根源,只能先看看有没有解决方案。经过多次调试,捕获select动作,找到了一个解决方案。原理很简单:利用div来模拟select。

解决方案:

      思路也是比较清晰的。页面中有两个html结构,一是select代码照常写(一开始处于隐藏状态display:none),二是被模拟的div(一开始处于显示状态),当点击div时出现select下拉框,同时将读取的option值给被模拟的div,其模拟核心代码可下载VisualSelect.js

html代码

<div class=”visualSelect” >商行</div>
<select class=”round” style=”display:none;”>
 <option value=”1”>国股</option>
 <option value=”2”>商行</option>
 <option value=”3”>其他</option>
</select>

css代码

.round { border-radius: 4px;}
.visualSelect {
 width: 100%;
 padding: .45rem .5rem .25rem .75rem;
 margin-bottom: .875rem;
 border: 1px solid #ddd;
 border-radius: 4px;
 color: #bbb;
}

js代码

注:由于该问题只存在于部分iphone,android手机并没有问题,因此最好判断机型。

var agent = navigator.userAgent;
if ( agent.indexOf(“iPhone”) > -1) {
 $(“select”).VisualSelect(); //调用插件即可
}

PS:bootstrap滚动监听在iPhone微信内置的浏览器上有时有效果有时没有

bootstrap写了一个affix的附加导航(导航条在左边,数据在右边,分成的两列),在安卓手机的微信内置浏览器上滚动监听是正常的,但是在iPhone微信的内置浏览器上有时可以监听有时不能监听,这是什么原因?

解决方案:

出现这个原因是用HTML5写的网页,iPhone没有及时响应导致的,最好用jQuery mobile。

Javascript 相关文章推荐
javascript针对DOM的应用分析(四)
Apr 15 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
js验证上传图片的方法
May 12 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
javascript从定义到执行 你不知道的那些事
Jan 04 #Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 #Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 #Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 #Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 #Javascript
详解AngularJS中的filter过滤器用法
Jan 04 #Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 #Javascript
You might like
表单元素事件 (Form Element Events)
2009/07/17 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
flask中的wtforms使用方法
2018/07/21 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
毕业生造价工程师求职信
2013/10/17 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
品酒会策划方案
2014/05/26 职场文书
学校标语大全
2014/06/19 职场文书
优秀班组申报材料
2014/12/25 职场文书
营业员岗位职责
2015/02/11 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
小王子读书笔记
2015/06/29 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL