页面中嵌套iframe，微信浏览器长按二维码识别不了

　　问题：在微信浏览器内，页面中嵌套iframe，iframe中用户触发事件后有个弹框会显示二维码，用户长按二维码可以识别并跳转。尝试了一下，安卓是正常的，但是ios是识别不了的。

　　解决过程：　　

　　1.这里客户给的并不是一个二维码的图片地址，而是需要跳转的地址。首先需要先把跳转地址生成二维码。

　　这里用的是qrcode.js

　　html：作为生成二维码的容器

<div id="autoCode"></div>

　　js：这里需要引入qrcode.js.

　　我这里放在静态文件里，大家测试的时候可以使用，自己项目还是要提取出去使用。

　　<script type="text/javascript" src="https://e-static.oss-cn-shanghai.aliyuncs.com/js/qrcode.min.js"></script>

$('#autoCode').qrcode({ width: 120, height: 120, text: `${res.domainname}` }); // 生成二维码

　　自定义宽度和高度，text ： 生成的二维码需要跳转的地址。还可以自定义更多的样式，颜色之类的，有兴趣的可以查一下资料。

　　现在页面中就可以生成二维码了，手机可以扫描跳转，但是在移动端，长按二维码时，并没有任何用处，接下来解决长按识别问题。

　　2.将生成的二维码转化成img。

　　通过qrcode生成的二维码，其实是用canvas绘制的，所以客户端长按并不能识别，所以需要自己将二维码转化成图片。

var mycanvas1=document.getElementsByTagName('canvas')[0]; // 获取canvas生成的图像，转化为img
var img=convertCanvasToImage(mycanvas1);

/**
 * 将生成的canvas 提取图片
 */
function convertCanvasToImage(canvas) {
      //新Image对象，可以理解为DOM
      var image = new Image();
      // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
      // 指定格式 PNG
      image.src = canvas.toDataURL("image/png");
      return image;
  }

　　这个时候以为大功告成了，试了一下安卓，可以长按识别跳转了，但是坑人的ios又不可以。

　　3.解决ios长按识别不了问题

　　问题原因：微信内ios识别二维码不准确，位置会有偏差，所能识别的区域页可能比当前二维码大小要小，导致用户按的位置并不一定可以识别。

　　解决方案：

　　①.在用户触摸到二维码时，生成一个图片，这个一定要是直接在body下，不要嵌套在别的结构里。

　　②.触摸二维码时，给生成的img设置src，img的大小控制好，覆盖用户可能触摸到的位置。

　　③.img可能会影响到布局，这里要设置img的透明度，再利用定位，可以达到不影响布局的情况下，实现效果。这里要注意的是，千万别设置display：none，要设置opcity。

　　④.当触摸结束时，将img隐藏。

　　上代码：

/**
 * 给index传图片地址
 */
function sendImgSrc (url) {
  $('.codeImg').on('touchstart', function () {
    window.parent.postMessage(JSON.stringify({ status: 1, url: `${url}`}), '*')
  }).on('touchend', function () {
    window.parent.postMessage(JSON.stringify({ status: 2 }), '*')
  })
}

　　因为我的页面是在iframe加载的，所以我需要将图片地址传给他的parent去处理触摸时生成的图片。

　　看一下父页面处理

// 解决iframe内二维码ios无法识别
  window.addEventListener('message', function (e) {
    var data = JSON.parse(e.data)
    if (data.status == 1) {
      $('.erweimaclass').css('z-index', 3)
      $('.erweimaclass').attr('src', data.url).show();
    } else if (data.status == 2){
      $('.erweimaclass').css('z-index', '1')
      $('.erweimaclass').hide();
    } else if (data.status == 3) {
      $('.erweimaclass').css('z-index', '1')
      $('.erweimaclass').hide();
    }
  })

　　这样就可以控制图片的显示和隐藏了。再尝试，ios页可以正常识别和跳转了，如果你还不能识别，那你需要去调整你body下面的img的大小和位置，让用户触摸二维码时，区域被覆盖。