如何实现Vue中iframe自适应嵌入网页的最佳方案？

本文共计769个文字，预计阅读时间需要4分钟。

目录+使用iframe嵌入网页，页面可自适应+Vue+iframe高度自适应+实用+实时刷新iframe高度+iframe高度有变化时通知父级+iframe高度有变化时直接修改iframe高度+使用iframe嵌入网页，页面可自适应

目录

• 使用iframe嵌入网页,页面可自适应
• vue iframe高度自适应 实用
• 实时刷新iframe高度变化
• iframe高度有变的时候通知父级
• iframe高度有变的时候直接修改iframe高度

使用iframe嵌入网页,页面可自适应

在项目中遇到要嵌入第三方网页的需求，因为没有同第三方页面交互的需求，只需展示即可，所以最终决定使用 iframe 将第三方的网页嵌入到系统中，并且做到自适应效果。

考虑到以后可能会增加嵌入页面的数量，故而封装成组件，供以后复用：

上图为系统整体结构图，需要在内容区内展示iframe 的内容，并且做到自适应。