vue 中嵌入iframe页面

使用的是vue-element-admin。

需求

项目需求是在点击左边侧边栏的时候判断如果是外部的页面之后，将此页面在右侧打开，每打开一个，tagview中也会相应加上，当切换这些tagview时，要保持每个页面切换前的状态，就是不重载。

尝试

新建了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，不然也会出现一些问题。

这只是一种方法，有好的思路大家可以来分享。

vue 中嵌入iframe页面相关推荐

网页中嵌入外部页面的四种方法
一．应用框架技术 ---- 要在宿主页面中嵌入外部页面的方法是,在宿主页面中包含外部页面的位置插入"< IFRAME name="XXX" width=X hei ...
【vue中实现iframe 自适应高度和去除滚动条】
项目场景: vue中实现iframe 自适应高度和去除滚动条解决方案: html <iframe:src="tempSrc"width="100%":h ...
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )
文章目录前言一.创建 Android 项目二.关联 Android 工程与 Flutter Module 工程 1.配置 Flutter Module工程 2.配置 build.gradle 3 ...
Document.visibilityState 页面监听 vue中实现离开页面时计时停止：停止计时后从上一次开始计时
概述 Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签 ...
app 中嵌入H5页面，H5跳转H5页面的跳转实现
app 中嵌入H5页面,H5跳转H5页面的跳转实现模拟创建a标签,并将href给到a标签点击实现: 模拟创建a标签,并将href给到a标签点击实现: var a = document.createE ...
Vue中监听页面刷新和关闭beforeunload事件
代码在methods中定义事件方法,在mounted 生命周期钩子中绑定事件, 在destoryed钩子中卸载事件 mounted () {window.addEventListener('befo ...
chrome浏览器插件开发-在当前网页中嵌入插件页面
chrome浏览器插件开发-在当前网页中嵌入插件页面既然想嵌入插件页面就是需要写html和css 在myPlugin中创建contentCss文件夹,里面创建index.css文件在manifes ...
HTML5怎么编辑另一个页面,html中嵌套iframe页面如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
Vue 中定义方法页面上使用
vue中定义方法的格式为什么要这样定义最近在学习前段,特别是HBuildX 我看里面很多方式都是这样使用,所以想强加练习如何引用当然我们的editArticle也可以直接放到js中,如下: 都 ...

vue 中嵌入iframe页面

需求

尝试

问题

方法

vue 中嵌入iframe页面相关推荐

最新文章

热门文章