前言:我们在开发中会有很多软件集成式的功能需要做,涉及到前端项目与其他软件集成的时候避免不了会在vue页面中嵌套其它软件页面的功能。
在前端我们常用的也比较实用的就是的iframe标签,如果您是新手可以参考Mdc中有简单的iframe标签的介绍,但没有内嵌页面与父页面之间的传值说明,如果您有该需要请自行百度即可。
我的: 我在这里能给大家提供的参考是移动端项目嵌套帆软页面,在vue页面路由发生变化的时候进行缓存处理的功能,因为iframe嵌套的页面属于一个新的页面,它不属于vue的DOM架构而是一个单独的DOM,所以我们在vue中每次进入iframe时所嵌套的这个DOM会重新加载及渲染,这种体验是极差的,性能也是极大的消耗。
代码: 在前言中已经做过介绍它是一个标签,它嵌套的是一个新的DOM元素,而且这个DOM与我们的vueDOM树是没有关系的,既然这样我们要想缓存这个DOM就只能在vueDOM首次加载的时候或者说是vue资源首次加载的时候去处理【全局注册】这个新的DOM。(我这里是vue移动端项目,即在APP.vue页面中处理),代码如下:代码比较简单不做分析,注释的很清楚。
总结分析: 其实这是一个很简单的功能,重要的是我们处理这个问题的思路,要知道iframe标签嵌套的是一个新的会生成新的DOM,新的DOM需要我们在项目初始化的时候去做全局注册处理,并通过v-show来缓存。