windows对象中获取vue对象。vue中使用iframe页面嵌套后，嵌套页里边页面跳转问题，实现外层路由的跳转，实现打开新的tab页面

电脑版发表于：2020/11/10 9:55

某些情况下使用iframe可以降低一下耦合度，分隔开项目,不会让一个项目越来越大。

[TOC]

### vue嵌套iframe页面的方法

![](https://img.tnblog.net/arcimg/aojiancc/1f3a49fface34401b7077e187a2b692d.png)

比如这里的path就是需要使用iframe打开的路由，是因为路由的规则就是这样设置的
![](https://img.tnblog.net/arcimg/aojiancc/98467e6f6abc4e49a32468a8f202d63b.png)

这一串`:routerPath`里边的内容才是真正iframe引用的内容，也就是这一串内容
![](https://img.tnblog.net/arcimg/aojiancc/88ff41cc983943f0a149bea87c68da35.png)

**贴一下主项目那个iframe的实现：**
![](https://img.tnblog.net/arcimg/aojiancc/c564aea077414733a5cefc545cf905cd.png)

```
<template>
  <div>
    <iframe ref="iframe" v-loading.fullscreen.lock="fullscreenLoading" :src="getUrlPath()" class="iframe" />
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    routerPath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      urlPath: this.getUrlPath()
    }
  },
  watch: {
    routerPath: function(val) {
      console.log(val)
      this.urlPath = this.getUrlPath()
    }
  },
  created() {
    this.src = this.$route.query
    console.log('ifram', this.$route)
    this.fullscreenLoading = false
  },
  mounted() {
    console.log(this.$route, this.routerPath)

    this.iframeInit()
    window.onresize = () => {
      this.iframeInit()
    }

    // 方法让子页面可以调用
    window.jumpUrl = this.jumpUrl
  },
  methods: {
    jumpUrl(_path, _query) {
      // 进行页面跳转
      this.$router.push({
        path: _path,
        query: _query
      })

      // router.push({
      //     path: '/task_report/schoolMonthTaskReport',
      //     query: {
      //         dateTime: _dateParamDay,
      //         type: _type,
      //         dateParamChoise: state.dateParamChoise,
      //         isJumpQueryDetails: "1"
      //     }
      // })
    },
    iframeInit() {
      const iframe = this.$refs.iframe
      const clientHeight = document.documentElement.clientHeight - 90
      iframe.style.height = `${clientHeight}px`
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          this.fullscreenLoading = false
        })
      } else {
        iframe.onload = () => {
          this.fullscreenLoading = false
        }
      }
    },
    getUrlPath: function() {
      // let url = window.location.href
      let url = `/${this.$route.params.routerPath}`
      // url = url.replace('/iframe', '')
      var timstamp = (new Date()).valueOf()
      if (url.indexOf('?') >= 0) {
        url = url + '&t=' + timstamp
      } else {
        url = url + '?t=' + timstamp
      }
      console.log(url)
      return url
    }
  }
}
</script>

<style>
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
```

vue中使用iframe页面嵌套后，嵌套页里边页面跳转不会在外部项目打开tab页面，只会在iframe页面里边刷新因为他其实是不同的项目，要实现外层路由的跳转，实现打开新的tab页面，肯定要想办法能操作到主项目的vue对象也就是外层项目的vue对象，一般有两种实现方法。

### 一种是在iframe中嵌套获取顶层的vue对象，获取到vue对象就可以操作路由进行页面跳转了

在主项目中，main.js里边把vue的对象存放到windows里边去。
![](https://img.tnblog.net/arcimg/aojiancc/0ddd9fd8baf5475880c36025162e2028.png)

然后嵌套的iframe页面里边就可以使用window.top.vm获取到顶层的vue对象了
![](https://img.tnblog.net/arcimg/aojiancc/8241ce16db244626bc8ec0bf1710dd28.png)

获取到顶层对象了就可以进行正常情况的跳转了。

### 还有一种就是在主项目提供一个方法，让嵌套的iframe页面来调用方法

参考：https://blog.csdn.net/pk694046220/article/details/128578108

```
mounted() {
    console.log(this.$route, this.routerPath)

    this.iframeInit()
    window.onresize = () => {
      this.iframeInit()
    }

    // 方法让子页面可以调用
    window.jumpUrl = this.jumpUrl
  },
  methods: {
    jumpUrl(_path, _query) {
      // 进行页面跳转
      this.$router.push({
        path: _path,
        query: _query
      })
      // router.push({
      //     path: '/task_report/schoolMonthTaskReport',
      //     query: {
      //         dateTime: _dateParamDay,
      //         type: _type,
      //         dateParamChoise: state.dateParamChoise,
      //         isJumpQueryDetails: "1"
      //     }
      // })
    }
  }
```

剑轩

windows对象中获取vue对象。vue中使用iframe页面嵌套后，嵌套页里边页面跳转问题，实现外层路由的跳转，实现打开新的tab页面

{{item.title}}