iframe中引用html 并实现传值 （进度条）

iframe中引用html，将html文件放了很多地方都没办法引用的到，最终在项目与src同级的public下新建static文件，将所用到的html文件全部放到static中，在iframe中直接引用即可。

由于两个iframe文件一个作为背景，一个作为内容，所以两个html文件完全重叠，所以通过z-index做了显示调整。

loading.vue文件

<template>
  <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1">
  //背景iframe
    <iframe
      src="/static/model.html"
      style="width: 100%; height: 100%; z-index: -1; position: absolute"
    ></iframe>
  //进度条iframe
    <iframe
      ref="iframe"
      src="/static/loading.html"
      style="width: 100%; height: 100%; z-index: 1"
    ></iframe>
  </div>
</template>

<script>
let data = {}  //在mounted中使用，暂存loadingContent
export default {
  props: ['loadingContent'],  //接收一个对象，里面接收进度值和描述文字

  data() {
    return {}
  },
  //监听父组件传来的进度值的变化，动态给进度iframe传值
  watch: {  
    loadingContent: {
      handler() {
        this.$refs.iframe.contentWindow.postMessage(
          {
            method: '',
            data: this.loadingContent,
          },
          '*',
        )
      },
      deep: true,
    },
  },
  methods: {},
  //初次传值
  mounted() {
    let iframe = this.$refs.iframe
    //iframe加载完毕后，PostMessage进行传值
    if (iframe.attachEvent) {
      //兼容浏览器判断
      iframe.attachEvent('onload', function () {
        let iframeWin = iframe.contentWindow
        iframeWin.postMessage(
          {
            method: '',
            data: data,
          },
          '*',
        )
      })
    } else {
      iframe.onload = function () {
        let iframeWin = iframe.contentWindow
        iframeWin.postMessage(
          {
            method: '',
            data: data,
          },
          '*',
        )
      }
    }
  },
  created() {
    data = this.loadingContent
  },
}
</script>

<style>
</style>

html文件中，接收传来的对象

loading.html文件

//接收父级传来的loading显示文字信息及loading进度
  window.addEventListener('message', function (event) {
    let data = event.data.data;
    loaded = data.rate
    $('.loadingType').text(data.content)
  }, false);
  

链接: https://pan.baidu.com/s/1Jm2s6cvYzWZ8QD7lDipABQ 提取码: 2yka 复制这段内容后打开百度网盘手机App，操作更方便哦