在vue中使用Iframe嵌套问题

Posted 2023-04-23

参考技术A vue中嵌套iframe,将要嵌套的文件放在static下面:

<iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></iframe>

src可以使用相对路径，也可使用服务器根路径http:localhost:8088/…等:

<iframe src="https://www.baidu.com/" width="300" height="300" frameborder="0" scrolling="auto"></iframe>

iframe实现vue嵌套外部系统

实现目标：

1. 外部系统相关配置放在配置文件中
2. 外部系统渲染入口放在主系统中，由主系统router控制外部系统的加载
3. 外部系统加载过程展示loading

相关代码：

// config.js
export default {
    collect: {
        staticAddress: \'http://127.0.0.1:9303\'
 },
 application: {
        staticAddress: \'http://127.0.0.1:9304\'
 }
};

// router.js
import config from \'./config.js\';
import DynamicComponent from \'./DynamicComponent.vue\';
{
     path: `${baseUrl}/collect`,
     name: \'collect\',
     props:config.collect,
     component: DynamicComponent
},

// DynamicComponent.vue
<template>
 <keep-alive> 
     <iframe ref="dynamicIframe"
     :src="staticAddress"
     frameborder="0"
     style="width:100%;height:100%;"
     @load="frameLoaded"
     />
 </keep-alive>
</template>
<script>
export default {
 name: "DynamicComponent",
 props: {
        staticAddress: {
            type: String,
            required: true
        }
 },
 beforeRouteEnter(to, from, next) {
        next(vm => {
            // element-ui loading效果
            vm.$showViewLoading();
        });
 },
 beforeDestroy() {
        this.$off(\'load\', this.frameLoaded);
 },
 methods: {
        frameLoaded() {
            this.$closeViewLoading();
        }
 }
};
</script>