Open kemistep opened 4 years ago
问题来源：客户要求展示一些文档，并且文档是现成的，打包好的 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 的滚动条就可以愉快的查看文档了。
欢迎关注我的微信公众号【热前端】，一起交流成长。
安装掘金浏览器插件
打开新标签页发现好内容，掘金、GitHub、Dribbble、ProductHunt 等站点内容轻松获取。快来安装掘金浏览器插件获取高质量内容吧！ https://juejin.im/post/6844903840039305224
vue 中嵌入 iframe
项目用的是 vueCli3.0 脚手架搭建的，这里我们需要引入的静态 HTML 就放在 public 下面的 static 文件夹下面。如下所示：
需要注意的是：iframe 的 src 属性直接写 “static/index.html” 即可，这里 src 的根路径就是 public。
之前无论把 HTML 放在哪里，都是 404，搞了好久。
引入进来之后，还有一个问题，就是 iframe 的滚动条和外层父容器的滚动条出现了两个滚动条。为了美观和用户体验，这里肯定要去掉一个。
我选择去掉外层父容器的滚动条。这里就涉及到 iframe 的高度应该取多少，根据计算不同分辨率，让网页全文高度减去 112，这样 iframe 就是 < 100% 外层高度，不至于触发外层的滚动条。
还有一个问题，当页面切换到别的页面，然后再切回 iframe 所在页面，由于 created 不会再触发，所有又会出现两个滚动条。
所以我们写一个监听器，当路由回到该页面时，再次计算 iframe 合理高度。
这样，就算是解决了两个滚动条的问题。页面只需要滚动 iframe 的滚动条就可以愉快的查看文档了。
最后
欢迎关注我的微信公众号【热前端】，一起交流成长。
安装掘金浏览器插件
打开新标签页发现好内容，掘金、GitHub、Dribbble、ProductHunt 等站点内容轻松获取。快来安装掘金浏览器插件获取高质量内容吧！ https://juejin.im/post/6844903840039305224