使用微信内置浏览器点击下拉框出现页面乱跳转现象(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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
javascript数据类型详解
Feb 07 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
组合算法的PHP解答方法
2012/02/04 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
简单实现js浮动框
2016/12/13 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
详解django中自定义标签和过滤器
2017/07/03 Python
python文件拆分与重组实例
2018/12/10 Python
200行python代码实现2048游戏
2019/07/17 Python
python django中8000端口被占用的解决
2019/12/17 Python
Python urllib3软件包的使用说明
2020/11/18 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
就业意向协议书
2015/01/29 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
员工试用期转正自我评价
2015/03/10 职场文书