解决IOS端微信在Iframe框架中无法长按识别二维码

易云易云 技术教程 2019年6月26日
1.78K 0

在对麒麟防洪网开发过程中，接到一位顾客，需要给他的微信支付防封，但是发现使用iframe框架后，IOS端无法正常长按二维码进行识别收款，而安卓端却可以正常识别。后面了解到IOS端与安卓端的长按操作是不同的！苹果的长按识别是只支持识别父页面元素，而安卓是通过截图来识别二维码的。所以我们就需要对页面进行改造，但是发现问题还是挺多的~~

首先想到的思路就是长按后，将iframe框架的二维码图片地址传递到父页面展示，而由于防洪的需要，就必须解决跨域传递信息的问题。而易云选择的是postMessage来传递信息，巧妙解决跨域问题，而代码如下：

iframe页面(子页面)：

<html>
<img id="ewm" src="二维码图片地址">
<script>
var btn = document.getElementById("ewm");
longPressFn(btn);
function longPressFn (target){
var timer = null;
target.addEventListener("touchstart",function(){
window.parent.postMessage(JSON.stringify({state:1,url:'二维码图片地址'}), 'http://父级页面域名');
});
target.addEventListener("touchend",function(){
window.parent.postMessage(JSON.stringify({state:2}), 'http://父级页面域名');
clearTimeout(timer);
});
}
</script>

父级页面：

<html>
<img id="ewm" src=""  style="display:none;">
<iframe src="iframe页面地址" frameborder="0" scrolling="auto" width="100%" height="1500px"></iframe>
<script>
window.addEventListener('message', function(e) {
let data = e.data
if(typeof data == 'string'){
data = JSON.parse(data)
}
if(data.state=='1'){//显示二维码
document.getElementById("ewm").style.display="inline";
document.getElementById("ewm").src=data.url;
setTimeout(function(){document.getElementById("ewm").style.display="none"; }, 2000);
}else{//隐藏二维码
document.getElementById("ewm").style.display="none";
}
}, false);
</script>

这个方法亲测是可以实现IOS端微信在iframe框架中长按识别二维码，但是问题也是挺多的，比如无法隐藏父级页面显示出的二维码，以及要求二维码位置等，这个需要易云后续慢慢解决。没办法，易云的编程是半桶水(业余爱好)，还在边学习边开发中.....

二维码(1)微信(2)
本文由 易云博客 作者：易云 发表，其版权均为 易云博客 所有，文章内容系作者个人观点，不代表 易云博客 对观点赞同或支持。如需转载，请注明文章来源。
♥赞76

相关文章