vue中iframe页面还能使用全局的一些变量吗

vue中iframe页面还能使用全局的一些变量吗：

vue中iframe页面还能使用全局的一些变量。

在iframe页面中有诸多跳转，当完成玩iframe页面中一些 *** 作时，此时点击浏览器的回退功能，那么恭喜你中奖了，你回退的是iframe页面，并无法回退和iframe无关联的vue页面，一直点击浏览器的回退，可能会一直重复iframe连接的几个页面，或直接404，或空白。

一个网站用iframe，嵌入另一个网站vue的url能嵌入的。建议使用微前端嵌套，或者将需要嵌套的页面打包好后再嵌套。因为是两个vue项目，现在菜单系统的vue项目使用iframe来嵌入另一内容vue项目。登录得到的token不能共享。解决思路：使用postMessage把菜单项目的token传递给内容vue项目。

因为上面的横向导航什么的都是homevue页面的内容，而iframe是另一个页面的内容，点击那个页面的表格列 *** 作中的录入会进入的iframe的及上图2，然后点击三级横向菜单，可进行iframe的内容切换每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的，包括左侧边栏，上方的面包屑等

用户在使用的时候，可能要切换别的系统就要在浏览器里，新打开窗口，再输入网址，回车。

总结来说，低效，所以现在想将几个系统融合到一个里边，并且每次切换系统的时候保留用户的 *** 作。因为每个页面都需要这个切换功能，所以我们直接在appvue里开发。我是用vue+element开发的，所以切换的地方直接用了ele的tab切换组件。(写法有很多种，主要是思路)

读完这些话再看代码，方便理解：

1如果用v-if控制每个iframe的显示隐藏，那么切换后系统后，再切换回来，iframe的属性会使 页面会刷新，用户的 *** 作不能保留

2如果纯粹用elementUi的tab组件来做，页面一进来，就会把每个系统的资源加载进来，卡的要命，所以需要做到按需加载

3 实现：结合1、2问题，用v-if控制页面一进来，只加载一个默认的系统；tab切换的时候再利用v-if去加载该系统的资源；v-if只控制一次，不会随着tab的切换变化，这样就能保证切换系统时保留了用户的 *** 作。新建了iframevue文件，里面套iframe标签，通过地址的参数不同，跳转不同的iframe页面，但是在做切换时，会导致iframe页面重载，利用了keep-alive 只是对非iframe页面作用，iframe页面没有作用。

因为keep-alive不是简单地隐藏的，它只会保留组件实例对象，但Dom已经没有了。所以你要让iframe不刷新，就必须让iframe隐藏，所以要把iframe与其它页面分开对待。

经过咨询别人和查资料，在路由配置中通过参数来判断该路由是否由iframe来展示，meta: { iframe: true }

然后在页面显示这里，通过判断 metaiframe 来决定是显示 router-view 还是 iframe 页面。通过这种指向同一个iframe组件的方法测试之后iframe页面切换时依然会重载。在页面上查找元素时发现就是一个iframe在切换时会不断的销毁和重建，每次都是新的iframe导致会重载。这就找到了问题出现的原因。

方法

在点击侧边栏的时候去动态创建iframe标签，不用同一个组件，通过控制多个iframe的显示隐藏解决在页签之间切换的时候刷新重载的问题。这样就是每个都是独立的，互不影响。

在这里插入描述

点击左侧时，动态创建iframe标签

在这里插入描述

当然这样就会存在问题，点击多次左侧打开多个iframe,多个iframe就会堆到一起。这时需要根据判断地址栏路由和tagview中打开的选项visitedViews遍历子项比较判断即可。

大致方向是这样，踩了很多坑，下面可能还会有一些小问题，比如点击关闭tagview时需要去移除掉关闭项的iframe，不然也会出现一些问题。

自从用饿了么框架重构项目以来，遇到 很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~

开发相关资料文档：

Element UI手册： >

前言：

提起vue的缓存，大家第一时间想到的一定是keep-alive，但是了解keep-alive缓存原理的都知道是将节点信息保留在VNode中的组件中（在内存中），并在需要渲染时从VNode渲染到真实DOM。iframe页面中的内容不属于该节点的信息，因此使用keep-alive仍会重新呈现iframe中的内容。但公司很多的项目涉及报表，报表都是以iframe的形式渲染的。

解决思路：

既然keep-alive只对节点信息有缓存，可以考虑在Vue的route-view节点上做点什么吗？切换非iframe页面时，它利用Vue路由；切换iframe页面时，它利用v-show切换显示和隐藏，这样就不会删除iframe节点，从而可以保持iframe状态。

做法：

router下的indexjs

引入iframe页面

路由配置

在router-view页面

  <div id = "index">

    <Header />

    <keep-alive>

      <router-view />

    </keep-alive>

    <!-- iframe page -->

        <component

            v-for="item in hasOpenComponentsArr"

            :key="itemname"

            :is="itemname"

            v-show="$routepath === itempath"

        ></component>

    <Footer />

  </div>

</template>

<script>

  import Header from '@/views/homePage/homePage_Header'

  import Footer from '@/views/homePage/homePage_Footer'

  import Vue from 'vue'

  export default {

    name: "index",

    components : {Header,Footer},

    created() {

      const routes = this$routeroptionsroutes;

        const componentsArr = thisgetComponentsArr(routes);

        componentsArrforEach((item) => {

            Vuecomponent(itemname, itemcomponent);

        });

        thiscomponentsArr = componentsArr;

        thisisOpenIframePage();

    },

    data() {

        return {

          iframeArr:[],

          componentsArr: []

        }

    },

    watch: {

        $route() {

            thisisOpenIframePage();

        }

    },

    computed: {

        hasOpenComponentsArr() {

            return thiscomponentsArrfilter(item => itemhasOpen);

        }

    },

    methods: {

        isOpenIframePage() {

            const target = thiscomponentsArrfind(item => {

                return itempath === this$routepath

            });

            if (target && !targethasOpen) {

                targethasOpen = true;

            }

        },

        getComponentsArr(routes) {      

             routesmap( it => {

               if(itiframeComponent){

                 const name = itname || itpathreplace('/', '');

                 thisiframeArrpush({

                  name: name,

                  path: itpath,

                  hasOpen: false,

                  component: itiframeComponent

                 })

               }

               if(itchildren&&itchildrenlength>0){

                 thisgetComponentsArr(itchildren)

               }

             })   

             return  thisiframeArr

        }

    }

  }

</script>

<style scoped>

</style>                                                   

结语：

文章参看至： >

Vue的iframe标签实际上就是HTML的iframe标签，使用HTMLiframe标签进行多次引用同一个Vue组件，使用Vue提供的属性prop和事件event等可实现子父组件间的双向数据绑定，实现逻辑复用。但需要注意每一个iframe标签都会新建一个独立的vue实例，因此需要注意数据隔离问题。此外，为了避免组件更新不及时的问题，我们需要监听内嵌iframe标签的load事件，等待组件加载完成后再进行 *** 作，确保数据更新及时。

<iframe  class="bottom" v-bind:src=thisrt></iframe>

data中定义contents

后续需要就给contents赋值就行

   thiscontents= thisfive_paramspendingURL+responseorderToken+'&id='+thisfive_paramsid

Vue中的iframe的src后面的参数可以通过拆解来实现多个请求。拆解参数的方式有很多，比如可以通过URL查询字符串，或者使用JavaScript中的URLSearchParams API来解析参数。此外，还可以使用Vue的vue-router库来解析参数，这样可以更加方便地实现多个请求。

以上就是关于vue中iframe页面还能使用全局的一些变量吗全部的内容，包括:vue中iframe页面还能使用全局的一些变量吗、一个网站用iframe,嵌入另一个网站vue的url能嵌入吗、iframe嵌套vue页面不能切换等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！