微信iframe嵌套页苹果无法长按扫码
最近需要在微信网页端对接第三方平台，博主使用的是iframe方式。因第三方平台中涉及“长按扫码进入小程序功能”，经测试ios手机微信浏览器中无法识别二维码图片，特此记录解决方案。
解决方式很简单，直接上代码
页面
//img标签默认“隐藏” 在进入扫码页后 “显示” 直接粘贴即可 style中样式勿动 必须要有
<img id="imgSm" src="" style="opacity:0.01;width:100%;position: absolute;z-index:100;">
<iframe id="main" name="main" frameborder="0" src="" style="width:100%; position: absolute;z-index:50;"></iframe>
JS
//判断手机型号 只在ios下才会出现问题
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//因涉及到iframe嵌套 需要知道iframe子界面中是否已经进入扫码功能页
//注意：在被调用页面（第三方平台页面）中添加下方代码，调用才可发送消息
//window.parent.postMessage({data:isCode:true,isSecond:true}},'*');
//监听接收信息
window.addEventListener('message',function(e){
isCode = e.data.data.isCode;//是否为二维码页
isSecond=e.data.data.isSecond;//是否进入二级功能
if(isCode){
if (isAndroid) {
//这个是安卓操作系统
}
if (isIOS) {
//IOS系统 显示 img标签
$("#imgSm").height($(window).height());//非必须，根据实际情况添加
$("#main").height($(window).height());//非必须，根据实际情况添加
$("#imgSm").show();
}
}
if(!isSecond){
if (isIOS) {
//退出扫码页后 将img标签隐藏，不然会影响其他页面使用
$("#imgSm").hide();
$("#main").height($(window).height());//非必须，根据实际情况添加
}
}
});
思路：ifream嵌套页进入扫码功能时，在iframe上增加一层透明的img标签。实现此功能需要跨域通信的支持，本文使用了html5中的PostMessage方法（传送门），配置十分简单。假设A为iframe页面、B为iframe嵌套的子页面。B页面向A页面发送“进入扫码页”消息，A页面监听接收“B页面消息”用于控制显示及隐藏img标签，使长按扫码功能正常使用。