iframe嵌套vue页面不能切换

Posted 2023-04-23

因为上面的横向导航什么的都是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. 然后重启浏览器

js怎么控制iframe嵌套页里面文字大小

您好：在主页面中可以调用iframe页面中的js函数。你在frame写好控制文字大小的函数，而大小值则是主页面调用的时候传过去的参数就可以了。形如：iframe中的函数为
funtion changeText(int txtBM)

这里设置文字大小为textBM;


而主页面中可以这样调用：
parent.frames[ "iframeName//这是iframe的name值 "].window.changeText(12);追问

根据中国上海,我们做了个无障碍浏览,嵌套的iframe,字体实现不了放大缩小

追答

根据中国上海？您是不是在做地图啊？

追问

百度中国上海,里面左上角有个无障碍浏览,做这个功能,但是遇到iframe嵌套,修改不了里面的页面属性

参考技术A //获得iframe对象
var i1 = window.frames['iframeId'];   
//获得元素对象
var pText=i1.document.getElementById("id");
//修改大小
pText.style.fontSize='20px';