上代码:定义,触发方式,可以通过按钮或加载来实现,根据实际需求来控制
<template> <div class="main-info"> <iframe ref="iframe" id="iframe" frameborder="0" :src="iframeSrc" > </iframe> </div> </template> mounted () { const self = this // 适配IE this.$nextTick(() => { const iframe = document.getElementById('iframe') if (iframe.attachEvent) { iframe.attachEvent('onload', function () { setTimeout(() => { self.clickIframe() self.handlePostMessageFail() }, 1000) }) } else { iframe.onload = function () { setTimeout(() => { // 坑一,postMessage发送通知时,可能对方的页面还没有加载完成导致发送失败 self.clickIframe() self.handlePostMessageFail() }, 1000) } } }) },
data () { return { iframeSrc: '', iframe: '', isReceiveMsg: false, // 是否收到消息 actionNum: 5, // 最多执行5次 timer: null,// 定时器 } },
处理失败机制
// postMessage消息发送失败机制,上面定义执行5次,第隔1.5秒,之前设置3次,间隔一秒,还是有失败的,所以这里采用这个,待完善 handlePostMessageFail () { this.timer = setInterval(() => { if (this.jumpStatus !== '2-1' && !this.isReceiveMsg) { if (this.actionNum <= 0) { clearInterval(this.timer) this.timer = null this.isReceiveMsg = true return } this.clickIframe() this.actionNum-- } else { clearInterval(this.timer) this.timer = null this.isReceiveMsg = true } }, 1500)