1.思路

用 postMessage处理两个页面的跨域问题,在长按iframe中的二维码图片时,在父级页面生成一个二维码盖在上面。

2.父页面

html:

<img  :src="qrcodeUrl" class="qrcodeClass" 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.qrcodeUrl = data.url
    }else{//隐藏二维码
        that.showImg = false
    }
}, false);

3.iframe页面

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

4.css

.qrcodeClass{
    opacity:0.01;
    width:100%;
    height:100%;
    z-index:99999999;
}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐