iframe在Vue中的应用

vue

最近写项目，遇到一个问题，那就是如何把vue项目和H5页面嵌套在一起呢？

看似风马牛不相及，万万没想到，还有个iframe在候着呢！

真是JS解决不了的，可别忘了还有标签呢！

步入正题：

一、介绍：

HTML 中的 <iframe> 标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

所有浏览器都支持 <iframe> 标签。

二、使用方法：

您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。

作为DOM对象，iframe还有诸多属性，重中之重src

src URL 规定在 iframe 中显示的文档的 URL。

详情查看http://www.w3school.com.cn/jsref/dom_obj_frame.asp

具体例子：

<p>Your browser does not support iframes.</p>

</iframe>

接下来，重点说说我在vue中怎么通过iframe标签嵌入h5页面的。

思路：

1.创建一个vue页面

2.把普通的h5页面加入到<iframe> 的src属性中。

3.<iframe>放进vue中的template中。

出现的问题：

切入成功，但会出现一个页面出现两个纵向滚动条的现象

scrolling='no'也无法避免的情况下，css可以采取一下措施：

.iframe {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

width: 100%;

height: 100%;

background: #fff;

overflow-y: hidden;

}