关键词：
因为上面的横向导航什么的都是home.vue页面的内容，而iframe是另一个页面的内容，点击那个页面的表格列操作中的【录入】会进入的iframe的及上图2，然后点击三级横向菜单，可进行iframe的内容切换每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的，包括左侧边栏，上方的面包屑等用户在使用的时候，可能要切换别的系统就要在浏览器里，新打开窗口，再输入网址，回车。
总结来说，低效，所以现在想将几个系统融合到一个里边，并且每次切换系统的时候保留用户的操作。因为每个页面都需要这个切换功能，所以我们直接在app.vue里开发。我是用vue+element开发的，所以切换的地方直接用了ele的tab切换组件。(写法有很多种，主要是思路)
读完这些话再看代码，方便理解：
1.如果用v-if控制每个iframe的显示隐藏，那么切换后系统后，再切换回来，iframe的属性会使 页面会刷新，用户的操作不能保留
2.如果纯粹用elementUi的tab组件来做，页面一进来，就会把每个系统的资源加载进来，卡的要命，所以需要做到按需加载
3. 实现：结合1、2问题，用v-if控制页面一进来，只加载一个默认的系统；tab切换的时候再利用v-if去加载该系统的资源；v-if只控制一次，不会随着tab的切换变化，这样就能保证切换系统时保留了用户的操作。新建了iframe.vue文件，里面套iframe标签，通过地址的参数不同，跳转不同的iframe页面，但是在做切换时，会导致iframe页面重载，利用了keep-alive 只是对非iframe页面作用，iframe页面没有作用。
因为keep-alive不是简单地隐藏的，它只会保留组件实例对象，但Dom已经没有了。所以你要让iframe不刷新，就必须让iframe隐藏，所以要把iframe与其它页面分开对待。
经过咨询别人和查资料，在路由配置中通过参数来判断该路由是否由iframe来展示，meta: iframe: true
然后在页面显示这里，通过判断 meta.iframe 来决定是显示 router-view 还是 iframe 页面。通过这种指向同一个iframe组件的方法测试之后iframe页面切换时依然会重载。在页面上查找元素时发现就是一个iframe在切换时会不断的销毁和重建，每次都是新的iframe导致会重载。这就找到了问题出现的原因。
方法
在点击侧边栏的时候去动态创建iframe标签，不用同一个组件，通过控制多个iframe的显示隐藏解决在页签之间切换的时候刷新重载的问题。这样就是每个都是独立的，互不影响。
在这里插入图片描述
点击左侧时，动态创建iframe标签
在这里插入图片描述
当然这样就会存在问题，点击多次左侧打开多个iframe,多个iframe就会堆到一起。这时需要根据判断地址栏路由和tagview中打开的选项visitedViews遍历子项比较判断即可。
大致方向是这样，踩了很多坑，下面可能还会有一些小问题，比如点击关闭tagview时需要去移除掉关闭项的iframe，不然也会出现一些问题。 参考技术A 如果您嵌入Vue页面的iframe中使用了Vue-Router，那么可能会遇到无法切换的问题。这是因为Vue-Router不能处理在iframe中进行history.pushState，而这是Vue-Router切换页面所依赖的技术。为了解决这个问题，可以更改Vue-Router的模式以支持仅使用hash模式（#），也可以使用postMessage API来实现页面的更新，不过这种解决方案需要在客户端多方面进行配置，不太容易实现。 参考技术B 方法：
1. 地址栏输入chrome://flags/
2. 分别把same-site-by-default-cookies 和 cookies-without-same-site-must-be-secure 设置为Disabled
3. 然后重启浏览器
vue中嵌套页面iframe标签
vue中嵌套iframe,将要嵌套的文件放在static下面: <iframesrc="../../../static/bear.html"width="300"height="300"frameborder="0"scrolling="auto"></iframe> src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… 查看详情
将vue使用iframe嵌套至html中使用(页面交互传值)
参考技术A原因:同源安全策略你不能用javascript访问一个<iframe>，如果你能做到这一点，那将是一个巨大的安全缺陷。对于同一源策略浏览器，阻止脚本尝试访问具有不同源的帧。参见:https://www.jianshu.com/p/daaaaef7fe8f----这是一条... 查看详情
一个页面里面嵌套了多个iframe,iframe刷新的问题
...技术A分类:电脑/网络>>互联网问题描述:一个页面里面嵌套了多个iframe,但是为什么有时候打开页面的时候，页面里面的iframe有的不能完全显示，非要在刷新几下页面，就能显示了！解析:iframe的内容是单独打开的，没有显示可... 查看详情
selenium窗口切换（多表单切换）
在web应用中，前台网页的设计一般会用到iframe/frame表单嵌套页面的应用。简单的就是一个页面签嵌套多个HEML/JSP文件。seleniumwebdriver 只能在同一页面识别定位元素，可以狭隘的理解成只能识别当前所在位置的页面上的元素。... 查看详情
关于iframe父子的调用
近期由于有个项目，在一个页面里嵌套了iframe页面，然后要用父页面调用子页面进行操作，一开始我没考虑太多，就直接在父页面用dom操作，直接操作子页面的dom，然后搞了半天都没搞成。后来去网上查了下，就是... 查看详情
vue+iframe实现点击f11全屏效果
...有googlechrome15+,safri5.1+,firfox10+,IE11支持父页面如果是Iframe嵌套内容，只需要在iframe中加入属性当然，如果是iframe多层嵌套，需要给每一层都加上该属性子页面 查看详情
iframe中嵌套的网页样式修改
我自己的网页上面，嵌套了一个别的页面，我想修改嵌套的那个网页上的其中一个#div的宽度，具体怎么修改，请给出事例。参考技术A假设iframe的id为fid，样式表中加入#fid#divwidth:200px!important;试试这个行不行追问写在那里？用js写... 查看详情
vue中iframe保持活动状态（不刷新）
...在内存中），并在需要渲染时从VNode渲染到真实DOM。iframe页面中的内容不属于该节点的信息，因此使用keep-alive仍会重新呈现iframe中的内容。但公司很多的项目涉及报表，报表都是以iframe的形式渲染的。解决思路：既然keep-alive只... 查看详情
页面插入iframe嵌套
functionloadURL(url){variFrame;iFrame=document.createElement("iframe");iFrame.setAttribute("src",url);iFrame.setAttribute("style","display:block;");iFrame.setAttribute("height","100px");iFrame.setAttr 查看详情
selenium中嵌套iframe的切换
前言：适用于多级iframe操作1.普通的切换iframefromseleniumimportwebdriverdriver=webdriver.Firefox()driver.switch_to.frame(0)#1.用frame的index来定位，第一个是0#driver.switch_to.frame("frame1")#2.用id来定位#driver.switch_to.frame("my 查看详情
<iframe>嵌套打开自己网站的页面失败，求解决方法
浏览器能正常打开我自己网站的网页，但是用iframe嵌套就chrome就提示服务器拒绝响应，按照网上的方法，在nginx配置server里加入add_headerX-Frame-OptionsALLOWALL;重启后也不行。求大神指点！参考技术A这是被服务器拦截了，不允许插入if... 查看详情
vue-element-adminiframes组件保留iframe操作状态
...是vue-element-admin的框架。 然后又有嵌入其它系统页面的需求，一开始是直接放在页面上的iframe，但是发现切换页面再切换 查看详情
拒绝网页被iframe嵌套
在响应头里加一个X-Frame-OptionsDENY：浏览器拒绝当前页面加载任何Frame页面SAMEORIGIN：frame页面的地址只能为同源域名下的页面ALLOW-FROMorigin：origin为允许frame加载的页面地址这样被不同源的页面以iframe包含时就不会显示了 查看详情
父页面操作嵌套iframe子页面的html标签元素
一个页面A.html使用iframe嵌套一个页面B.html，在A页面写js操作B页面HTML元素，首先要获取到B页面document对象，才能对嵌套页面进行操作请看一个实例，在A页面写js操作B页面div的内容：A.html代码：<!DOCTYPEhtml><html><head><... 查看详情
请问如何在一个iframe中嵌套并显示另一个iframe
...frame"></iframe></iframe>（其他参数省略）这样嵌套对吗？为什么只显示outerIframe？要怎么才能把innerIframe显示出来？框架的嵌套是通过页面实现的,而不是两个IFRAME标签嵌套写在一起就能实现的.你需要outerIframe所加载的... 查看详情
页面跳转如何进入一个嵌套在iframe中的页面中？
用thinkphp框架做的。参考技术A用iframe框架，嵌套一个网页进去即可实现；很简单的；iframe元素会创建包含另外一个文档的内联框架（即行内框架）。以下是iframe的属性、值、描述alignleftrighttopmiddlebottom不赞成使用。请使用样式代... 查看详情
php页面跳转到带有iframe嵌套的指定嵌套页面
...iv>首页效果如下：如何让成功登录的页面跳转到首页的嵌套的admin_php/admin_log.php参考技术A我不是很懂你要的效果，但iframe要有一个目标的呀，目标就是iframe名字。 查看详情
html中嵌套iframe不断刷新登录页面，此页面会过期，如果会，怎么解决
HTML中嵌套iframe不断刷新登录页面，此页面会过期，如果会，怎么解决加js语句控制使外部嵌套和内部框架同时刷新即可可以禁止页面刷新设置刷新按钮重新加载整个页面参考技术A程序可能限制了恶意注册机，不过框架嵌套页面... 查看详情