vue嵌入iframe的问题

8,295 阅读1分钟

问题来源:客户要求展示一些文档,并且文档是现成的,打包好的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的滚动条就可以愉快的查看文档了。

最后

欢迎关注我的微信公众号【热前端】,一起交流成长。