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

在对麒麟防洪网开发过程中,接到一位顾客,需要给他的微信支付防封,但是发现使用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框架中长按识别二维码,但是问题也是挺多的,比如无法隐藏父级页面显示出的二维码,以及要求二维码位置等,这个需要易云后续慢慢解决。没办法,易云的编程是半桶水(业余爱好),还在边学习边开发中.....

本文由 易云博客 作者:易云 发表,其版权均为 易云博客 所有,文章内容系作者个人观点,不代表 易云博客 对观点赞同或支持。如需转载,请注明文章来源。
3

发表评论