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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1637 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题，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 的值不会变化。

已经懵逼，有人拯救吗？

iframe

Vue

页面

ight

13 条回复 • 2021-10-28 10:34:42 +08:00

sanmaozhao

2020-05-30 20:01:20 +08:00

找个 js 库，Vue 包装一下就行了，不用自己写
http://davidjbradshaw.com/iframe-resizer/example/
http://davidjbradshaw.github.io/iframe-resizer/

sanmaozhao

2020-05-30 20:04:57 +08:00

原来本身就有 Vue 的样例，包装都不用了
https://github.com/davidjbradshaw/iframe-resizer/blob/b05580898da096c56ce487b62620ea6f415831c3/docs/use_with/vue.md

ljpCN

2020-05-30 22:03:55 +08:00 via Android

巧了，最近有相同的需求。据我所知可以用 postMessage 实现，前提是嵌入的 iframe 也受你控制。另外感谢楼上 @sanmaozhao 分享，我仔细看看。

dallaslu

2020-05-30 22:12:02 +08:00

如果你的这段 html 尺寸固定，不需要交互，那么可以包装成 svg，

```
<svg width="448" height="500" viewBox="0 0 448 500"
version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject x="0" y="0" width="448" height="500">
<body xmlns="http://www.w3.org/1999/xhtml">

</body>
</foreignObject>
</svg>
```

当成图片来用，想怎么缩放就怎么缩放

iConnect

2020-05-30 22:21:02 +08:00

@dallaslu 这都行... 太魔幻了...

ljpCN

2020-05-31 00:34:34 +08:00 via Android

我好奇你这个需求是不是一个 div 里面套 iframe，div 的 css 这宽度 100vw，高度 100vh，iframe 写 width="100%" height="100%" 就行了

black11black

2020-05-31 13:37:06 +08:00

@dallaslu 很显然尺寸不固定，响应式网页会随着用户窗口的变化而变化啊

iamverylovely

2020-05-31 13:44:32 +08:00

@black11black iframe 高度 document.documentElement.clientHeight，宽度 100%,应该就可以了吧

iamverylovely

2020-05-31 13:46:40 +08:00

或者写到一个事件里，检测窗体高度改变之类的~~不是很专业哈~~只是自己前几天遇到过就是这么解决的

black11black

2020-05-31 14:31:19 +08:00

@sanmaozhao 不行，如果 iframe 内部页面超出屏幕的话，这么写是无法滚动的

black11black

2020-05-31 14:37:07 +08:00

@sanmaozhao 大佬，cli4 创建的项目，按链接里这么装载之后没作用啊

<iframe
v-resize="{ log: true }"
width="100%"
src="/api/static/index_show_page.html"
frameborder="0"
></iframe>

他显示还是跟一个普通的 iframe 一样，并没有自动 reszize，但是看 log 的部分提示 resizer 已经运行了，懵逼

dallaslu

2020-05-31 17:38:05 +08:00

@black11black 我的意思是比例固定，宽度可以变化呀

tcpdump

2021-10-28 10:34:42 +08:00

解决了吗？