给iframe添加headers和 修改iframe的内容

给iframe添加headers和 修改iframe的内容
下面展示代码

<template>
  <div id="app">
    <div class="check-user-book">
      <a-button v-if="userBookSrc" type="primary" @click="checkUserBook">点击查看使用说明书</a-button>
    </div>
    <iframe
      ref="myIframe"
      style="border:none"
      :width="searchTableWidth"
      :height="searchTableHeight"
      src=""
    ></iframe>
    <!-- sandbox="allow-scripts allow-same-origin" -->
    <a-modal
      :visible="showModal"
      :footer="null"
      width="80%"
      @cancel="handleCancel"
    >
      <iframe :src="userBookSrc" frameborder="0" width="100%" height="800px"></iframe>
    </a-modal>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    // 接收的src
    reportUrl: {
      type: String,
      default: ''
    },
    // 接收的说明书的url
    userBookSrc: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchTableHeight: 0,
      searchTableWidth: 0,
      showModal: false,
    }
  },
  mounted() {
    window.onresize = () => {
      this.widthHeight() // 自适应高宽度
    }
    this.$nextTick(function () {
      this.widthHeight()
    })

    setTimeout(() => {
      var iframe = this.$refs.myIframe;

      let currentDate = new Date().getTime().toString()
      let str1 = currentDate.slice(0, 1)
      let str2 = currentDate.slice(1)
      let randomNum = (Math.random() * 10).toFixed(0)
      let userUser = JSON.parse(localStorage.getItem('user'))

      this.populateIframe(iframe, [["Authorization", userUser.name + JSON.parse(localStorage.getItem('Authorization')) || ''], ["Bouid", str1 + '' + (userUser && userUser.uid || '')], ["Currenttime", str2 + '' + randomNum]])
    }, 0);
  },
  computed: {
    ...mapGetters('account', ['user']),
  },
  methods: {
    // 宽高度
    widthHeight() {
      this.searchTableHeight = window.innerHeight - 180
      this.searchTableWidth = window.innerWidth - 230
    },
    // 给iframe的url添加header
    populateIframe(iframe, headers) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", this.reportUrl + '?u_name=' + this.user.name + '&u_id=' + this.user.Bouid);
      // xhr.responseType = "text";
      xhr.setRequestHeader(headers[0][0], headers[0][1])
      xhr.setRequestHeader(headers[1][0], headers[1][1])
      xhr.setRequestHeader(headers[2][0], headers[2][1])
      xhr.onload = function () {
        if (xhr.readyState === xhr.DONE && xhr.status === 200) {
          if (xhr.responseText.includes(': 302') || xhr.responseText.includes(': 300')) {
            iframe.srcdoc = '验证失效, 请重新登录'
          } else {
            iframe.srcdoc = xhr.response;
          }
        }
      };
      xhr.send();
    },
    // 查看使用说明书
    checkUserBook() {
      this.showModal = true
    },
    // 关闭弹窗
    handleCancel() {
      this.showModal = false
    }
  }
}
</script>
<style lang="less" scoped>
.check-user-book {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>

记录备用，hia hia hia~