vue嵌入iframe的问题

问题来源：客户要求展现一些文档，而且文档是现成的，打包好的html，直接嵌入到页面就行。可是中间仍是遇到一些问题，记录一下。

vue中嵌入iframe

<iframe src="静态文件路径" frameborder="0" scrolling="auto"></iframe>
复制代码

项目用的是vueCli3.0脚手架搭建的，这里咱们须要引入的静态HTML就放在public下面的static文件夹下面。以下所示：

须要注意的是：iframe的src属性直接写“static/index.html”便可，这里src的根路径就是public。

以前不管把HTML放在哪里，都是404，搞了很久。

引入进来以后，还有一个问题，就是iframe的滚动条和外层父容器的滚动条出现了两个滚动条。为了美观和用户体验，这里确定要去掉一个。

我选择去掉外层父容器的滚动条。这里就涉及到iframe的高度应该取多少，根据计算不一样分辨率，让网页全文高度减去112，这样iframe就是<100%外层高度，不至于触发外层的滚动条。

还有一个问题，当页面切换到别的页面，而后再切回iframe所在页面，因为created不会再触发，全部又会出现两个滚动条。

因此咱们写一个监听器，当路由回到该页面时，再次计算iframe合理高度。

这样，就算是解决了两个滚动条的问题。页面只须要滚动iframe的滚动条就能够愉快的查看文档了。

最后

欢迎关注个人微信公众号【热前端】，一块儿交流成长。