Vue中嵌入iframe遇到的问题

1.iframe嵌入后在ios中无法滚动的问题。

解决办法： 在iframe外层加上一层div。

<div class='box'>

  <iframe src=""></iframe>

</div>

<style>

.box {

    height: 100%;
    width: 100%;
    overflow-y: scroll; //必须有这个，否则ios无法滚动。
    -webkit-overflow-scrolling:touch; // ios滚动卡顿的问题。

}

iframe {

    width:100%;

    height:100%;

}

   

</style>

2.iframe嵌入后，设置高度100%，出现上下滑动轻微晃动的问题。（提供两种解决办法，为什么产生这种晃动的bug还不得而知。）

解决办法：1.在iframe组件外层再嵌套一层子组件。即把iframe所在组件引入其他子组件，不把iframe组件直接当做子组件嵌入。关于这个方法具体是如何解决的问题还没研究明白。

                  2.给iframe加position: absolute。通过测试发现是iframe导致的问题，虽然iframe高度和外层div高度一样，但就是会莫名轻微晃动。所以给iframe加定位使其脱离文档流，就解决了问题。