vue中使用iframe标签嵌入页面

最新推荐文章于 2024-04-05 18:15:13 发布

山河故人163

最新推荐文章于 2024-04-05 18:15:13 发布

阅读量911

点赞数 1

文章标签： vue.js javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_62733705/article/details/134167189

版权

vue中使用iframe标签嵌入页面，并给iframe的url添加header
接下来，上代码
defaultIframe.vue是模板页面，里面会给url添加header.

<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('userUser'))

      this.populateIframe(iframe, [["Authorization", userUser.name + JSON.parse(localStorage.getItem('Authorization')) || ''], ["Bouid", str1 + '' + (userUser && userUser.Bouid || '')], ["Currenttime", str2 + '' + randomNum]])
    }, 0);
  },
  computed: {
    ...mapGetters('account', ['user']),
  },
  methods: {
    // 宽高度
    widthHeight() {
      this.searchTableHeight = window.innerHeight - 180
      this.searchTableWidth = window.innerWidth - 300
    },
    // 给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>

下面是使用它的组件：

<template>
    <div>
        <!-- 163.高级搜索 -->
        <DefaultIframe :reportUrl="url" :userBookSrc="userBookSrc"></DefaultIframe>
    </div>
</template>
<script>
import httpURL from '@/pages/global_URL.vue'
import DefaultIframe from '@/pages/tools/components/DefaultIframe.vue'

export default {
    components: {
        DefaultIframe
    },
    data() {
        return {
            baseUrl: httpURL.httpURL,
            userBookSrc: 'https://doccnxeNdprWG4D9r0eL8hy4vNB',  // 用户使用说明书
        }
    },
    computed: {
        url() {
            return this.baseUrl + '/api/video_search/'
        },
    }
}
</script>