iframe 详解-在vue中使用

Posted 2021-09-05 越自律，越自由！！！

上代码：定义，触发方式，可以通过按钮或加载来实现，根据实际需求来控制

<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)

 

将来的自己,会感谢现在不放弃的自己!