vue中使用iframe嵌入网页,页面可自适应问题

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

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

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

vue中使用iframe嵌入网页,页面可自适应问题_第1张图片

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

整体代码如下: