用postMessage来满足业务需求

用postMessage来满足业务需求

此功能主要是实现SPA应用中打开多个窗口并在各个窗口间进行信息同步。

业务流程：列表页面（list）点击某一条信息，在新窗口打开该条信息详情内容（detail）进行查看和编辑。list中对该条信息进行部分修改，detail中能进行提示和同步更新。detail中在编辑完详情后，通知list进行列表刷新。

list page:

// detail窗口
const detailWindow = window.open('/detail.html', 'detail_' + ItemID)

// 询问detail窗口是否准备好
const watchDetailWindowStatus = setInterval(() => {
    const readyMessage = { type: 'pending', content: 'are you ready' }
    detailWindow.postMessage(readyMessage)
}, 200)

// 给list窗口加入监听，来接收detail传过来的消息
addEventListener('message', (e) => {
    if (typeof e.data === 'object') {
        // 根据msg内容进行业务处理
        handleMessage(e.data)
    } else {
        // 如果是文字内容可以打印也可以toast提示
        console.info(e.data)
    }
}, false)

function handleMessage(data) {
    switch (data.type) {
    	// 如果已建立通信 就停止询问
        case 'connected': {
            clearInterval(watchDetailWindowStatus)
            console.info(data.content)
            break
        }
        case 'update': {
            // do something
            break
        }
    }
}

detail page:

let listWindow = null

addEventListener('message', (e) => {
    if (typeof e.data === 'object') {
        listWindow = listWindow || e.source
        handleMessage(e.data)
    }
}, false)

function handleMessage(data) {
    switch (data.type) {
    	// 当收到list窗口发来的询问信息后 给予反馈
        case 'pending': {
            listWindow.postMessage({
                type: 'connected',
                content: 'start communication!'
            })
            break
        }
        case 'update': {
            // do something
            break
        }
    }
}

大致内容就是这些，基本上能满足业务的一些需求，其他用法 iframe、service worker、web worker等就不说了，网上多的是相关文章。