postmates-js——用于iframe、新窗口等形式的父子页面通信

postmate

postmate是一款基于postMessage来处理父子页面通信的库，轻量且好用。

详细的使用见示例

postmate的不足

• 不支持直接配置iframe dom节点，而是postmate内部根据url在容器（container配置项）中创建iframe；
• 不支持一个页面里配置多个子页面进行通信；
• 不支持通过window.open的方式打开新页面后的通信；

postmates-js的改进

• 支持直接配置iframe dom节点，而postmate内部是根据url在容器（container配置项）中创建iframe；
• 支持一个页面里配置多个子页面进行通信；
• 支持通过window.open的方式打开新页面后的通信；

支持一对多

源码

https://gitee.com/videring/postmates-js

使用方式

尽可能的少改动postmate的原有用法。
parent.com

    
Parent Page/div>
    
    

// Kick off the handshake with the iFrame
PostmatesJS.debug = true;
const open = window.open('http://localhost:8083/c3.html', '_blank')
const handshake = new PostmatesJS([
    {
        container: document.getElementById("cid1"), // first way
        url: "",
        name: "name1"
    }, {
        container: document.getElementById("cid2"), // second way, similar to `postmate`
        url: "http://localhost:8082/c2.html",
        name: "name2"
    }, {
        container: open, // document.getElementById("cid2"), // third way, open a new page with `window.open` 
        url: "http://localhost:8083/c3.html",
        name: "name2"
    }
]);

// When parent <-> child handshake is complete, data may be requested from the child
handshake.then(parentAPIs => {
    parentAPIs.forEach(parentAPI => {
        parentAPI.on('some-event', data => {
            console.log(data)
        }); // Logs "Hello, World!"
        parentAPI.call("demoFunction", {options:"Hello, PostmatesJS!"})
    })
});

localhost:8081/c1.html

PostmatesJS.debug = true
const model = new PostmatesJS.Model({
    demoFunction:(options) =>{
        console.log('child1', options)
    }
 });
model.then(childAPI => {
    childAPI.emit('some-event', 'Hello, World! Child1');
});

localhost:8082/c2.html

PostmatesJS.debug = true
const model = new PostmatesJS.Model({
    //demoFunction：提供给父页面的方法
    //options: 从父页面传入的参数信息
    demoFunction:(options) =>{
        console.log('child2', options)
    }
});
model.then(childAPI => {
    childAPI.emit('some-event', 'Hello, World! Child2');
});

localhost:8083/c3.html

PostmatesJS.debug = true
const model = new PostmatesJS.Model({
    //demoFunction：提供给父页面的方法
    //options: 从父页面传入的参数信息
    demoFunction:(options) =>{
        console.log('child3', options)
    }
});
model.then(childAPI => {
    childAPI.emit('some-event', 'Hello, World! Child3');
});