vue 如何自适应调整嵌入的 iframe 的大小，让用户完全感觉不出有 iframe 这个东西？

如题，vue 开发目前遇到一个困难，

需求背景大概是这样，vue 框架搭的前端，里面需要做个介绍页面，只要有展示功能即可，所以可以是纯静态的。后端程序员写前端苦手，设计网页更别提，遂咨询 V2 老哥，如何快速把网上模板扒到 vue 框架里面。老哥表示扒个几把，直接把网上扒下来的东西跑起来然后 iframe 塞到 vue 里就行了，我表示惊为天人

于是从 html 模板网上随便拉了个好看的模板，嵌入 vue，确实是能跑起来。而我对效果有一个希望是，希望这个 iframe 在用户端的表现跟一个原生的 vue componet 一样（由于没有互动，主要体现在响应式方面）。我希望用户使用中完全感受不到这里是 iframe 嵌入的。

具体来说分解出来应该有三个需求

1 、iframe 嵌入某个链接地址，这个 iframe 的高度应该跟该链接的源页面的高度完全相等。

2 、这个 iframe 不能带有滚动条，整个页面的滚动应该由主页面滚动条完成。

3 、这个 iframe 的高度应该随窗口变化自适应变化。（源页面由 jquery 完成，本身有响应式功能）

================================================ 分割线

需要根据窗口大小变化自适应的话，很自然的想到了 window.onresize = () => {} 这种东西 于是写了这段代码

<template>
  <div>
    <iframe style="width:100%" ref="main_page_iframe"></iframe>
  </div>
</template>

<script>
// 省略一些不重要内容
export default {
  mounted(){
    let that = this
    window.onresize = () => {
      let ifdoc = that.$refs.main_page_iframe.contentDocument
      let cHeight = Math.max(ifdoc.body.clientHeight, ifdoc.documentElement.clientHeight)
      let sHeight = Math.max(ifdoc.body.scrollHeight, ifdoc.documentElement.scrollHeight)
      that.$refs.main_page_iframe.style.height = Math.max(cHeight, sHeight) + 'px'
    }
  }
}
</script>

目前问题：iframe 确实能够填满整个页面，并且在用户窗口大小改变的时候（比如当用户窗口变窄，根据原始页面响应式设计，该页面应该会变长），此时 vue 的 iframe 也确实会变高。但是如果之后再将用户窗口变宽，原始页面会变窄，但 iframe 高度却不会缩回。已经目视到页面变短的效果发生，但函数中 cHeight 和 sHeight 的值不会变化。

已经懵逼，有人拯救吗？