頁面中嵌套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的大小和位置，讓用戶觸摸二維碼時，區域被覆蓋。