iframe 详解-在vue中使用

本文主要是介绍iframe 详解-在vue中使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

这篇关于iframe 详解-在vue中使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！