Question

我正在开发一个JS库，该库创建具有所请求内容的iframe，并且还有助于促进父站点与iframe之间的通信。

要在父站点和iframe之间进行通信，我正在使用“发布消息”。这可以正常工作，并且我可以使用此功能来完成我想要的一切。我的想法是将window.postMessage()和window.addEventListener('message', ...)“包装”到我自己的库中，以便使用该库的站点只关心推送和读取数据。同样，这有助于我确保在window.postMessage()和window.addEventListener('message', ...)上都进行了正确的验证。

使用该库，我设法公开了一个功能，供站点将数据推送到iframe。但是，我还没有找到一种方法来“公开”一个在window.addEventListener('message', ...)中捕获事件时可以调用的回调。

示例代码：

图书馆

export function createIframe(config) {
    ....
    readPostMessage();
}

let readPostMessage = () => {
    window.addEventListener('message', (e) => {
        // validation and checks
        ...

        if(e.origin.match(regex)) {
            let data = e.data;
            switch(data.event) {
                case 'myTestCallback':
                    // ... call callback function?
                    callSomeFunctionDefinedByParent();
                    break;
            }
        }
    });
};

export function pushData(data) {
    iframe.contentWindow.postMessage(data, '*');
}

然后使用webpack构建库。

父网站

<html>
<body>
    <!-- iframe to be embedded in myDiv -->
    <div id="myDiv"></div>
    <button onclick="testPushData()">Test Push Data to Iframe</button>

    <script src="./my-library.js"></script>
    <script>
        // assuming that my-library.js exposes global variable myLibrary
        myLibrary.createIframe({
            element: '#myDiv',
            width: '100%',
            height: '100%'
        });

        // works well
        testPushData() {
            myLibrary.pushData({event: 'pushDataTest'});
        }

        // parent define what happens when 'myTestCallback' is called...
        // something I had in mind... for example:
        myLibrary.on('myTestCallback', () => {
            //....
        });

        // or...
        myLibrary.myTestCallback = () => {
            //....
        });
    </script>
</html>
</body>

上面的代码是一些简单的代码，可以让我对所拥有的东西有所了解。目前，我的问题是找到一种向父对象公开回调的方法，当将'myTestCallback'类型的事件发布到父站点时，可以调用该回调。

由于这是一个库，我希望父站点可以决定从iframe发布消息时应该发生什么。在此示例中，我在readPostMessage()函数内部将“ myTestCallback”作为事件类型。我将如何允许父站点定义库将随后调用的某些函数？

Answer 1

不是这么简单，但是由于对问题的评论，我设法解决了这个问题。

因此，我在库中添加了一个.on函数，该函数使父级可以添加回调。它们存储在一个对象中，然后在必要时通过名称进行调用。

代码：

图书馆

export function on(eventName, callback) {
    callbacks[eventName] = callback;
}

然后使用来调用：

callbacks['test']();

父母

myLibrary.on('test', () => {
    console.log('parent callback function!');
});

我以这种方式实现了.on函数，以便可以将多个回调传递给该库。

JavaScript库-如何公开回调函数

1 个答案: