如何实现Vue中iframe嵌入网页，使其页面自适应布局？

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

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

目录

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

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

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

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

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