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

相关阅读：微信支付如何实现内置浏览器的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。

赞 (0)

相关推荐

  • 微信支付开发动态链接Native支付

    注意: 微信支付现在分为v2版和v3版,2014年9月10号之前申请的为v2版,之后申请的为v3版.V3版的微信支付没有paySignKey参数.v2的相关介绍请参考方倍工作室的其他文章.本文介绍的为微信支付v3. 一.生成商品信息 动态链接支付过程中,是先生成商品交易进行,再来进行支付交易的. 1. 商品信息准备 主要是先定义商品的名称及价格,以及交易号.代码如下. include_once("../WxPayPubHelper/WxPayPubHelper.php"); //使用统

  • PHP通过微信跳转的Code参数获取用户的openid(关键代码)

    关键代码如下所示: //获取微信登录用户信息 function getOpenID($appid,$appsecret,$code){ $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$appid."&secret=". $appsecret."&code=".$code."&grant_type=authorization_code

  • 关于微信中a链接无法跳转问题

    [问题] 微信页面开发时,各个主页之间的跳转,完全是通过a链接进行的,但是来回跳转几次,再次从其他主页面跳回首页的时候,微信头部出现了跳转加载进度条,但是就是不跳转,也没有任何反应 [范围] 只出现在微信内置浏览器上 [解决方法] 只要在原本跳转的链接后面带上任意一个参数,即: 复制代码 代码如下: <a href="http://www.baidu.com">百度一下</a> 变成 复制代码 代码如下: <a href="http://www.

  • 使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办

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

  • 解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置. BINGO~ 通过HTML5的history API + 缓存可以做到这一点. 执行原理: 1.0.通过history API的 history.pushState或 history.replaceState 保存AJAX状态: 2.0.同时将AJAX获取到的数据缓存起来(可以考虑使用H5的

  • Javascript限制网页只能在微信内置浏览器中访问

    Javascript限制网页只能在微信内置浏览器中访问

    那么问题就来了,这个网页首先涉及到了移动web前端开发,我优先选择了用HTML5+bootstrap组合来实现页面的美观效果,前端其他的任务交给javascript解决(这里我是完全使用原生javascript代码,没有用到任何的框架,因为考虑到手机加载网页的速度本来就慢,而且框架中很多用不到的功能也会随网页一起加载,耗费用户流量). 一切功能都就绪以后,客户试用也觉得很满意,之后我就把代码提交到了正式的服务器上.不过,对方又突然提到了一点:你做的页面确实挺漂亮的,兼容性也不错,但是这个页面用电

  • 微信内置浏览器图片查看器的代码实例

    这篇文章主要介绍了微信内置浏览器图片查看器的代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 var imgs = new Array(); $("img").each(function () { //这里的图片路径要直接能在浏览器中打开的完整的url路径 imgs.push($(this).attr('src')); }); $("img").on('click', function () { var pa

  • 如何判断微信内置浏览器(通过User Agent实现)

    在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko)

  • vue 解决在微信内置浏览器中调用支付宝支付的情况

    我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转页面 第一步: payment: 是选择支付页面,pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码: let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == "

  • jQuery实现点击下拉框中的值累加到文本框中的方法示例

    jQuery实现点击下拉框中的值累加到文本框中的方法示例

    本文实例讲述了jQuery实现点击下拉框中的值累加到文本框中的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale

  • 微信内置浏览器私有接口WeixinJSBridge介绍

    微信内置浏览器私有接口WeixinJSBridge介绍

    微信网页进入,右上角有三个小点,没错,我们用到的就是它!我们只要通过将小点列表下的按钮进行自定义,就可以随心所欲的分享我们自己的内容了. 注意:(WeixinJSBridge只能在微信内打开的网页有效) 按钮一之------发送给好友 复制代码 代码如下: function sendMessage(){    WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("发送给好友"); });   } 这样,只要在

  • Adnroid 微信内置浏览器清除缓存

    微信开发比较头疼的一个情况就是缓存难以清除,然而奇怪的是微信app在IOS中是可以刷新页面的,但是Android中却不知道基于什么考虑,无法清除缓存也没有刷新功能,这个就给开发者设置了不小的障碍,哪有页面是最好就不改的,然后如果去改,微信浏览器缓存着css.图片,这样改完后看效果就变得相对费劲了.       我上网查过,遇到这个蛋疼问题的不止我一个,寻寻觅觅却找不到解决办法的也不止我一个,有人说去微信"设置"."通用"中"清除微信存储空间",我

  • 微信支付如何实现内置浏览器的H5页面支付

    因为项目需要,要在H5页面中加入微信支付,所以便去尝试,只想说真的很坑,尤其调试起来不方便 这是微信的官方API文档 微信API 微信支付的准备工作 申请公众号,申请开通支付,这个很简单,自行百度 申请好之后 在微信公众平台页面的"微信支付"页面中的"开发配置"Tab上配置"支付授权目录","测试授权目录","测试白名单" 在微信公众平台页面的"开发者中心"中找到"AppID(

随机推荐