iframe-app

介绍

基于原生 iframe 实现库，搭建微前端服务，体量极小，适合一般功能的微前端应用，支持，注入js，link，主子应用通信等；但是由于使用原生 iframe；一些基于 iframe 的问题无法解决；

快速上手

主应用

npm i [email protected] -S
import iframeApp from 'iframe-app';
console.log(iframeApp);
const optionResults = {
    container: '#app',
    entry: 'http://localhost:8622/',    // 入口应用
};
iframeApp(optionResults).loading().then(app => {
    app.emit('baseTomMicro', '基座向子应用通信')
    app.on('microToBase', (info) => {
        console.log(info);
    })
});

子应用

__MICFRONT__.on('baseTomMicro', function(info) {
    console.log(info);
})
__MICFRONT__.emit('microToBase', '子应用向基座通信')

API

父应用配置参数

function iframeApp(options: {
    entry?: string,
    container: string,
    base?: string,
    load?: function,
    html?: string,
    scriptSrc?: Array<string>,
    linkHref?: Array<string>,
}): {
    loading: function,
    on: function,
    emit: function,
}

| 参数名称 | 描述 | |---|---| |entry|渲染的 url, entry 与 html，只能且必须配置一项| |html|渲染的 html 字符串， entry 与 html，只能且必须配置一项| |container|容器节点的选择器| |base|设置文档中包含的所有相对 URL 的根 URL| |load|子应用加载成功回调| |scriptSrc|注入 script 的 src 数组| |linkHref|注入 link 的 href 数组|

| 返回对象方法 | 描述 | |---|---| |loading|执行 loading 方法，返回 promise，当子应用加载成功后，触发 resolved| |emit|父传子的通信方法，请勿直接调用，此时子应用没有加载好，请在loading().then()回调中触发| |on|子传父的通信方法|