iframe在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

具体例子：

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>

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

思路：

1.创建一个vue页面

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

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

代码如下：

<template>
  <div>
    <scenceCase class="mobile"></scenceCase>

    <iframe 
        id="iframeId" :src="url" frameborder="0" class="pc iframe"  scrolling="auto"                             
        @load='loadfrom'>
    </iframe>
  </div>

</template>

<script>
import scenceCase from '@/pages/yunsheying/m/scenceCase'

export default {
  components: {
    scenceCase
  },
  data () {
    return {
      url: '/static/xxx4.0/scene.html'
    }
  },
  mounted () {
  },
  methods: {
    
    loadfrom (val) {
      // console.log(val.path[0].contentWindow.location)
      // console.log(val.path[0].contentWindow.location.href)
      // http://localhost:8080/static/yunyaopai4.0/index.html
      let url = val.path[0].contentWindow.location.href
      let urlArr = url.split('/')
      let urlArrLength = urlArr.length
      if (urlArr[urlArrLength - 1] === 'index.html' && urlArr[urlArrLength - 2] === 'yunyaopai4.0') {
        // console.log('ok')
        // console.log(this.$router)
        this.$router.push('/live')
      }
    }
  }

}
</script>

<style lang='less'>
.iframe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow-y: hidden;
}
</style>

图文详解：

出现的问题：

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

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

.iframe {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

width: 100%;

height: 100%;

background: #fff;

overflow-y: hidden;

}

哈哈哈，貌似滚动条消失了，稳定性还有待考察。