vue+iframe 添加请求头，自适应宽度和高度

最新推荐文章于 2023-11-01 18:13:59 发布

代码改变生活-120

最新推荐文章于 2023-11-01 18:13:59 发布

阅读量3k

点赞数 3

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/yjl13598765406/article/details/130871566

版权

在这里插入图片描述

代码： Iframe.vue

<template>
  <div class="iframe">
    <iframe
      v-if="isRequestHeader"
      id="myIframe"
      name="myIframe"
      src=""
      frameborder="0"
      scrolling="no"
    />
    <iframe
      v-else
      id="myIframe"
      name="myIframe"
      :src="`${apiUrl}${url}`"
      frameborder="0"
      scrolling="no"
    />
  </div>
</template>
<script>
import util from '@/utils/util'
import { getToken } from '@/utils/token'
export default {
  name: 'Iframe',
  props: {
    // 请求的URL
    url: {
      type: String,
      default: '',
      required: true
    },
    // 是否携带请求头（例如：token）
    isRequestHeader: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data () {
    return {
      apiUrl: util.apiUrl
    }
  },
  watch: {
    url: {
      handler: function (newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.$nextTick(() => {
            this.adaptWidthAndHeight()
          })
        }
      }
    }
  },
  created () {
    if (this.isRequestHeader) {
      setTimeout(() => {
        const myIframe = document.querySelector('#myIframe')
        this.populateIframe(myIframe, [['token', getToken()]])
      }, 0)
    }
  },
  mounted () {
    this.adaptWidthAndHeight()
  },
  methods: {
    /**
     * iframe-宽高自适应显示
     */
    adaptWidthAndHeight () {
      const myIframe = document.getElementById('myIframe')
      const deviceWidth = document.documentElement.clientWidth
      const deviceHeight = document.documentElement.clientHeight
      // 数字是页面布局宽度差值
      myIframe.style.width = (Number(deviceWidth) - 40) + 'px'
      // 数字是页面布局高度差
      myIframe.style.height = (Number(deviceHeight) - 164) + 'px'
    },
    /**
     * iframe 添加请求头
     */
    populateIframe (iframe, headers) {
      var xhr = new XMLHttpRequest()
      // `${this.apiUrl}${this.url}` 请求的URL
      xhr.open('GET', `${this.apiUrl}${this.url}`)
      xhr.responseType = 'blob'
      headers.forEach((header) => {
        xhr.setRequestHeader(header[0], header[1])
      })
      xhr.onreadystatechange = () => {
        if (xhr.readyState === xhr.DONE) {
          console.log('xhr.response', xhr.response)
          if (xhr.status === 200) {
            iframe.src = URL.createObjectURL(xhr.response)
          }
        }
      }
      xhr.send()
    }
  }
}
</script>
<style lang="scss" scoped>
.iframe {
  width: 100%;
  height: 100%;
}
</style>