使用iframe嵌入某个h5页面时 等比放大缩小原h5页面

使用iframe嵌入某个h5页面时 等比放大缩小原h5页面 这个方式只使用于pc端 移动端实现方式另行实现

<div class="" ref="chart-iframe">
  <iframe :src="Url"
          frameborder="0"
          :style="Style"
          :width="W"
          :height="H"
          ref="chart-content-iframe">
  </iframe>
</div>

data() {
  return {
   W: 1080,
  H: 1920,
    Style: {
      backgroundColor: 'transparent',
      transform: "scale(0.35)",
      position: "absolute",
      top: `30px`,
      "transform-origin": "top left",
    },
    Interval: null,
    Url: "https:12345678?ver=" + Number(new Date()),//加new Date()是为了定时刷新页面
  }
}

setScaleStyle() {
  let width = this.$refs["chart-iframe"].clientWidth;
  let height = this.$refs["chart-iframe"].clientHeight;
  // 说明 目前容器宽度较大
  let min = Math.min(width / this.W, height / this.H);
  min = parseFloat(min.toFixed(2)) - 0.01;
  let marginTop = (height - this.H * min) / 2;
  if (marginTop < 0) marginTop = 2;
  let marginLeft = (width - this.tW * min) / 2 - 3;
  let o = {
    backgroundColor: 'transparent',
    transform: `scale(${min})`,
    position: "absolute",
    top: `${marginTop}px`,
    left: `${marginLeft}px`,
    "transform-origin": "top left",
    "border-radius": "18px",
  };
  this.$set(this, "Style", o);
},