iframe 嵌套外部地址导致外部页面中的echart样式失效

注:echart在iframe中使用不可以作百分号为单位不然样式会失效

出现了默认大小,给解决方案:

我这里是跨域的还是两个项目

父页面:

  <iframe ref="systemIframe"
              id="iframe"
              scrolling="no"
              frameborder="0"
              src="http://192.168.8.101:8082/system/#/condition/Whole"
              width="1920"
              height="1080"
              @load="loaded"
              v-show="showIframe"></iframe>
 

 methods: {
    loaded () {
      console.log('只有在 iframe 加载时传递数据给子组件，$refs 才是非空的')
      // 只有在 iframe 加载时传递数据给子组件，$refs 才是非空的
      this.showIframe = true
      this.$refs.systemIframe.contentWindow.postMessage({
        type: 'systemIntegration',
        data: {
          hiddenAside: true, // ture为隐藏
          hiddenHeader: true // 隐藏头部
        }
      }, '*')
    }

  }

子页面写法调用minix

<template>
  <div style="width:100%;height:100%;"></div>
</template>

  mounted () {
    mounted () {
    this.$nextTick(() => {
      this.initChart();
      //调用minix
      this.setEchartStyle(
        this,
        document.getElementById("z-suppelier"),
        this.chart
      );
    });
  },
  },
methods: {
    initChart () {
      this.chart = echarts.init(this.$el);
 
      this.setOptions(this.chartData);
    },
}

minix文件

export const echartMixin = {
  methods: {
    //设置echart宽度和高度
    /**
     * @param {当前指向的this} t
     * @param {获取echart父级的宽高} curEl
     * @param {设置当前echart的宽高} echart
     */
    setEchartStyle(t, parentEl, echart) {
      window.addEventListener(
        "message",
        (event) => {
          const msg = event.data;
          if (msg.type == "systemIntegration") {
            setTimeout(() => {
              let W = getComputedStyle(parentEl, null)["width"]; //getComputedStyle()这个方法来获取元素当前的样式
              let H = getComputedStyle(parentEl, null)["height"];
              console.log("定时器里的", W, H);
              echart.resize({
                width: W,
                height: H
              });
            }, 300);
          }
        },
        false
      );
    }
  }
};
export default echartMixin;