ios中微信内iframe页面，长按图片不出识别二维码功能

最新推荐文章于 2025-02-25 16:25:21 发布

格竹悟道

最新推荐文章于 2025-02-25 16:25:21 发布

阅读量6.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：原创文章 JavaScript 文章标签：微信跨域识别二维码

本文链接：https://blog.youkuaiyun.com/webjhh/article/details/88954498

JavaScript 同时被 2 个专栏收录

17 篇文章

订阅专栏

原创文章

15 篇文章

订阅专栏

本文介绍了解决iOS微信内部iframe页面中长按图片无法识别二维码的问题。通过使用postMessage进行父子页面间的跨域通信，并在父页面上显示一个透明的二维码覆盖在图片上，从而实现长按识别功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2.ios中微信内iframe页面，长按图片不出识别二维码功能

解决办法：
用 postMessage处理两个页面的跨域问题：https://www.cnblogs.com/roam/p/7520433.html
在长按iframe中的二维码图片时，在父级页面生成一个二维码盖在上面。

iframe页面

    $('#erweima').on('touchstart',function(){
        window.parent.postMessage(JSON.stringify({state:1,url:'图片链接'}), '*');
    }).on('touchend',function(){
        window.parent.postMessage(JSON.stringify({state:2}), '*');
    })

父页面

    window.addEventListener('message', function(e) {
      let data = e.data
      if(typeof data == 'string'){
        data = JSON.parse(data)
      }
      if(data.state=='1'){//显示二维码
        that.showMa = true;
        that.erweimaUrl = data.url
      }else{//隐藏二维码
        that.showMa = false
      }
    }, false);