postmessage-channel

postmessage双工通讯组件

使用

npm run dev 打开页面：http://localhost:7100/ 使用手册：http://127.0.0.1:7100/docs

可以参考以下demo的实现 index.html 父窗口 son.html 子窗口

具体代码参考（Vue3）

父窗口

import PostMessage from '@jv/postmessage-channel'
import {ref,onMounted}from 'vue';

const iframe=ref(null)
let ps

function handleClick() {
    ps.publish('$router.push', { path: '/approve' })
}

onMounted(()=>{
    ps = new PostMessage(iframe.value);
})

<template>
    <div @click="handleClick">示例1</div>
    <div> <iframe ref='iframe' src="http://localhost:8089" frameborder="0" width="100%" style='height:100vh;'></iframe> </div>
</template>

子窗口

import { getCurrentInstance,provide } from 'vue';
import PostMessage from '@jv/postmessage-channel'

export default ()=> {
    const {proxy:ctx}=getCurrentInstance()
    let ps = null;
    if (window.frames.length !== window.parent.frames.length) {
        console.log('测试是否是iframe');
        try {
            //获取父级页面
            const referrer = document.referrer
            ps = new PostMessage(referrer);
            //提供
            provide('PostMessage', ps)
            ps.subscribe('$router.push', ({ data }) => {
                ctx.$router.push(data);
                return {
                    code: 200,
                };
            });
        } catch (e) {
            console.error(`PostMessage:${e}`);
        }
    }
    //向子组件注入ps
    provide('PostMessage', ps)
}