ios中微信内iframe頁面，長按圖檔不出識别二維碼功能

1.思路

用 postMessage處理兩個頁面的跨域問題，在長按iframe中的二維碼圖檔時，在父級頁面生成一個二維碼蓋在上面。

2.父頁面

html:

<img  :src="erweimaUrl" class="erweimaClass" v-show="showImg"/>
           

js:

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

3.iframe頁面

$('#erweima').on('touchstart',function(){
        window.parent.postMessage(JSON.stringify({state:1,url:'圖檔連結'}), '*');
    }).on('touchend',function(){
        window.parent.postMessage(JSON.stringify({state:2}), '*');
    })
           

4.css

.erweimaClass{
    opacity:0.01;

    width:100%;

    height:100%;

    z-index:99999999;
}