@huzan/hz-iframe-message NPM

@huzan/hz-iframe-message

iframe 消息通知库

Install

npm install --save @huzan/hz-iframe-message

Options

messageType = {
    childToChild,
    childToChildCallBack,
    childToMaster,
    childToMasterCallBack,
    masterToChild,
    masterToChildCallBack,
}

messageEvent = {
    event.data//用户传过来的data
    event.origin//送方窗口的 origin
    event.source//对发送消息的窗口对象的引用
    event.messageType//消息类型（参照messageType）
    event.callBack//回调方法 （需要用CallBack方法发送才有）
    event.from//(childToChild类型才有)
    event.origEvent//原始消息
}

callBackMessageEvent = {
    event.data//回调用户传过来的data
    event.callBackId//回调ID
    event.origEvent//原始消息
}

//master(主iframe)
import {MasterController} from "@huzan/hz-iframe-message"

const masteriframeSKD = new MasterController({
    callBackTimeout: 1000 * 30 //全局回调超时时间(毫秒 默认: 1000 * 30)
    processTransferChildMessage//childToChild类型中转消息处理
    processTransferChildCallBackMessage//childToChildCallBack类型中转消息处理
})

const masteriframeSKD.setIframeData([
    {
        name: 'iframe1',
        iframeWin,
        targetOrigin: 'http://localhost:4516',
    },
])

function onMessage(event){
    event(参照messageEvent)
}

masteriframeSKD.onMessage(onMessage)//注册监听函数

masteriframeSKD.offMessage(onMessage)//取消监听函数

masteriframeSKD.offAllMessage()//取消监听所有函数

masteriframeSKD.postToChild({//向子iframe发送消息
    name,//setIframeData的子iframe name（必须先注册才能调用）
    message,//发送消息
    targetOrigin//(可覆盖setIframeData中的targetOrigin)
})

masteriframeSKD.postToChildCallBack({//向子iframe发送消息有回调的消息
    name,//setIframeData的子iframe name（必须先注册才能调用）
    message,//发送消息
    targetOrigin//(可覆盖setIframeData中的targetOrigin)
    callBack(callBackMessageEvent)//回调函数
    errorCallBack(error)//错误函数（如果error.hzTimeout === true 这个错误是超时错误）
    callBackTimeout//(可覆盖全局回调超时时间)
})

import {ChildController} from '@huzan/hz-iframe-message'

const childiframeSKD = new ChildController({
    callBackTimeout: 1000 * 30 //全局回调超时时间(毫秒 默认: 1000 * 30)
    masterTargetOrigin(默认'*')
    masterWin(默认window.parent)
})

function onMessage(event){
    event(参照messageEvent)
}

childiframeSKD.onMessage(onMessage)//注册监听函数

childiframeSKD.offMessage(onMessage)//取消监听函数

childiframeSKD.offAllMessage()//取消监听所有函数

childiframeSKD.postToMaster({//向master发送消息
    message,//发送消息
    targetOrigin//(可覆盖setIframeData中的targetOrigin)
})

childiframeSKD.postToMasterCallBack({//向master发送消息有回调的消息
    message,//发送消息
    targetOrigin//(可覆盖setIframeData中的targetOrigin)
    callBack(callBackMessageEvent)//回调函数
    errorCallBack(error)//错误函数（如果error.hzTimeout === true 这个错误是超时错误）
    callBackTimeout//(可覆盖全局回调超时时间)
})

childiframeSKD.postToChild({//向子iframe发送消息
    name,//setIframeData的子iframe name（必须master先注册才能调用）
    message,//发送消息
    targetOrigin//(可覆盖setIframeData中的targetOrigin)
})

childiframeSKD.postToChildCallBack({//向子iframe发送消息有回调的消息
    name,//setIframeData的子iframe name（必须master先注册才能调用）
    message,//发送消息
    targetOrigin//(可覆盖setIframeData中的targetOrigin)
    callBack(callBackMessageEvent)//回调函数
    errorCallBack(error)//错误函数（如果error.hzTimeout === true 这个错误是超时错误）
    callBackTimeout//(可覆盖全局回调超时时间)
})

Demo

//master
import React from 'react'
import styles from './index.module.less'
import {hot} from 'react-hot-loader'
import {MasterController} from "pkg/hz-iframe-message/lib/index.esm"


@hot(module)
export default class Index_page extends React.PureComponent {
    constructor(props) {
        super(props)
        this.iframeSKD = new MasterController()
        this.iframeSKD.onMessage(this.onMessage)
    }

    onMessage = (e)=>{
        console.log('master onMessage', e)
        if(e.callBack){
            setTimeout(()=>{
                e.callBack('master callBack')
            }, 500)
        }
    }

    componentDidMount() {
        this.initIframeSKD()
    }

    componentWillUnmount() {
        this.iframeSKD.destroy()
    }

    initIframeSKD(){
        this.iframeSKD.setIframeData([
            {
                name: 'iframe1',
                iframeWin: this.iframe1Ref.contentWindow,
                // targetOrigin: 'http://localhost:4516',
            },
            {
                name: 'iframe2',
                iframeWin: this.iframe2Ref.contentWindow,
                // targetOrigin: 'http://localhost:4516',
            }
        ])
    }

    getIframe1 = (node) => {
        this.iframe1Ref = node
    }

    getIframe2 = (node) => {
        this.iframe2Ref = node
    }

    onLoad = ()=>{
        // console.log(111)
    }

    onError = (e)=>{
        console.err(e)
    }

    toIframe2Callback = ()=>{
        this.iframeSKD.postToChildCallBack({
            name: 'iframe2',
            message: `to iframe2 callback`,
            // callBackTimeout: 100,
            callBack: (e) => {
                console.log('toIframe2Callback')
                console.log(e)
            },
        })
    }

    toIframe2 = ()=>{
        this.iframeSKD.postToChild({name: 'iframe2', message: 'to iframe2'})
    }

    toIframe1Callback = ()=>{
        this.iframeSKD.postToChildCallBack({
            name: 'iframe1',
            message: `to iframe1 callback`,
            callBackTimeout: 100,
            callBack: (e) => {
                console.log('toIframe1Callback')
                console.log(e)
            },
            errorCallBack: (e)=>{
                console.error(e)
            }
        })
    }

    toIframe1 = ()=>{
        this.iframeSKD.postToChild({name: 'iframe1', message: 'to iframe1'})
    }

    render() {
        return (
            <div className={styles.main}>
                <iframe
                    ref={this.getIframe1}
                    className={styles.iframe}
                    src={'./hz-iframe-message/iframe1'}
                    onLoad={this.onLoad}
                    onError={this.onError}
                />
                <iframe
                    ref={this.getIframe2}
                    className={styles.iframe}
                    src={'./hz-iframe-message/iframe2'}
                    onLoad={this.onLoad}
                    onError={this.onError}
                />
                <button onClick={this.toIframe1} className={styles.btn}>
                    toIframe1
                </button>
                <button onClick={this.toIframe1Callback} className={styles.btn}>
                    toIframe1Callback
                </button>
                <button onClick={this.toIframe2} className={styles.btn}>
                    toIframe2
                </button>
                <button onClick={this.toIframe2Callback} className={styles.btn}>
                    toIframe2Callback
                </button>
            </div>
        )
    }
}

//child1
import React from 'react'
import {ChildController} from 'pkg/hz-iframe-message/lib/index.esm.js'
import styles from './index.module.less'
import {hot} from 'react-hot-loader'

@hot(module)
export default class Index_page extends React.PureComponent {
    constructor(props) {
        super(props)
        this.iframeSKD = new ChildController({
            masterTargetOrigin: 'http://localhost:4516',
        })
        this.iframeSKD.onMessage(this.onMessage)
    }

    onMessage = (e) => {
        console.log('child iframe1 onMessage', e)
        if(e.callBack){
            setTimeout(()=>{
                e.callBack('iframe1 callBack')
            }, 500)
        }
    }

    componentWillUnmount() {
        this.iframeSKD.destroy()
    }

    componentDidMount() {

    }

    sentMaster = () => {
        this.iframeSKD.postToMaster({
            message: `to master`,
        })
    }

    sentMasterCallback = () => {
        this.iframeSKD.postToMasterCallBack({
            message: `to master`,
            // callBackTimeout: 100,
            callBack: (e) => {
                console.log('sentMasterCallback callback')
                console.log(e)
            },
            errorCallBack: (e)=>{
                console.error(e)
            }
        })
    }

    sentChild = () => {
        this.iframeSKD.postToChild({
            name: 'iframe2',
            message: `to child iframe2`,
        })
    }

    sentChildCallback = () => {
        this.iframeSKD.postToMasterCallBack({
            name: 'iframe2',
            message: `to child iframe2 callback`,
            // callBackTimeout: 100,
            callBack: (e) => {
                console.log('sentChildCallback iframe1 callback')
                console.log(e)
            },
        })
    }

    render() {
        return (
            <div className={styles.main}>
                iframe1
                <button onClick={this.sentMaster} className={styles.btn}>
                    sentMaster
                </button>
                <button onClick={this.sentMasterCallback} className={styles.btn}>
                    sentMasterCallback
                </button>
                <button onClick={this.sentChild} className={styles.btn}>
                    sentChild
                </button>
                <button onClick={this.sentChildCallback} className={styles.btn}>
                    sentChildCallback
                </button>
            </div>
        )
    }
}


//child2
import React from 'react'
import {ChildController} from 'pkg/hz-iframe-message/lib/index.esm.js'
import styles from './index.module.less'
import {hot} from 'react-hot-loader'

@hot(module)
export default class Index_page extends React.PureComponent {
    constructor(props) {
        super(props)
        this.iframeSKD = new ChildController({
            masterTargetOrigin: 'http://localhost:4516',
        })

        this.iframeSKD.onMessage(this.onMessage)
    }

    onMessage = (e) => {
        console.log('child iframe2 onMessage', e)
        if(e.callBack){
            setTimeout(()=>{
                e.callBack('iframe2 callBack')
            }, 500)
        }
    }

    componentWillUnmount() {
        this.iframeSKD.destroy()
    }

    componentDidMount() {

    }

    sentMaster = () => {
        this.iframeSKD.postToMaster({
            message: `to master`,
        })
    }

    sentMasterCallback = () => {
        this.iframeSKD.postToMasterCallBack({
            message: `to master`,
            // callBackTimeout: 100,
            callBack: (e) => {
                console.log('sentMasterCallback callback')
                console.log(e)
            },
            errorCallBack: (e)=>{
                console.error(e)
            }
        })
    }

    sentChild = () => {
        this.iframeSKD.postToChild({
            name: 'iframe1',
            message: `to child iframe1`,
        })
    }

    sentChildCallback = () => {
        this.iframeSKD.postToMasterCallBack({
            name: 'iframe1',
            message: `to child iframe1 callback`,
            // callBackTimeout: 100,
            callBack: (e) => {
                console.log('sentChildCallback iframe2 callback')
                console.log(e)
            },
        })
    }

    render() {
        return (
            <div className={styles.main}>
                iframe2
                <button onClick={this.sentMaster} className={styles.btn}>
                    sentMaster
                </button>
                <button onClick={this.sentMasterCallback} className={styles.btn}>
                    sentMasterCallback
                </button>
                <button onClick={this.sentChild} className={styles.btn}>
                    sentChild
                </button>
                <button onClick={this.sentChildCallback} className={styles.btn}>
                    sentChildCallback
                </button>
            </div>
        )
    }
}