JavaScript库-如何公开回调函数_Javascript

JavaScript库-如何公开回调函数

javascript

JavaScript库-如何公开回调函数,javascript,Javascript,我正在开发一个JS库，它创建一个包含所请求内容的iframe，并帮助促进父站点和iframe之间的通信要在父站点和iframe之间进行通信，我正在使用Post消息。这工作得很好，我可以用这个功能做任何我想做的事情。我的想法是将window.postMessage（）和window.addEventListener（'message'，…）包装在我自己的库中，这样使用这个库的站点就只关心推送和读取数据。另外，这有助于确保在window.postMessage（）和window.addEventL

我正在开发一个JS库，它创建一个包含所请求内容的

iframe

，并帮助促进父站点和

iframe

之间的通信

要在父站点和

iframe

之间进行通信，我正在使用Post消息。这工作得很好，我可以用这个功能做任何我想做的事情。我的想法是将

window.postMessage（）

和

window.addEventListener（'message'，…）

包装在我自己的库中，这样使用这个库的站点就只关心推送和读取数据。另外，这有助于确保在

window.postMessage（）

和

window.addEventListener（'message'，…）

上都进行了正确的验证

使用这个库，我成功地为站点提供了一个函数，用于将数据推送到

iframe

。但是，我还没有找到一种“公开”回调的方法，当在

窗口中捕获事件时，我可以调用该回调。addEventListener（'message'，…）

示例代码：

图书馆

然后使用webpack构建库

父站点


测试将数据推送到Iframe
//假设my-library.js公开全局变量myLibrary
myLibrary.createIframe({
元素：“#myDiv”，
宽度：“100%”，
身高：“100%”
});
//效果很好
testPushData（）{
pushData（{event:'pushDataTest'}）；
}
//父级定义调用“myTestCallback”时发生的情况。。。
//我脑子里想的东西。。。例如：
myLibrary.on（'myTestCallback'，（）=>{
//....
});
//或者。。。
myLibrary.myTestCallback=（）=>{
//....
});

上面的代码是一段简单的代码，让我了解我所拥有的。我现在的问题是找到一种方法将回调公开给父站点，当一个类型为

'myTestCallback'

的事件发布到父站点时，我可以调用该回调

由于这是一个库，我想让父站点决定从

iframe

发布消息时应该发生什么。在本例中，我将“myTestCallback”作为

readPostMessage（）

函数中的事件类型。我该如何允许父站点定义一些函数，然后库将调用这些函数？

我不认为这很简单，但由于对这个问题的评论，我成功地解决了这个问题

因此，我在我的库中添加了一个

.on

函数，它允许父级添加回调。它们存储在一个对象中，然后在必要时按名称调用该对象

代码：

图书馆

然后使用以下命令调用：

callbacks['test']();

母公司

我以这种方式实现了

.on

函数，这样我就可以将多个回调传递给库。

所以相关的问题实际上是“如何在iframe和父页面[JavaScript]之间通信？”然后它只是“在“回调”中包装/隐藏所述方法”。。FWIW:iframe和父页面不共享相同的

窗口

/JavaScript上下文。这不是真的，因为我可以通过单独使用

postMessage（）

然后使用

'message'

事件侦听器来实现这一点。我希望自己能处理好这一切。我想知道一种方法，如何在调用“myTestCallback”时启用父站点。我更新了这个问题以便更好地解释我自己。回调函数来自哪里，你库的调用者如何使用它？他们会调用

myLibrary.installCallback（function（）{…}）

，还是将其作为参数传递给

pushData

？好吧，如果您的

installCallback

接受一个参数（我们称之为

cb

），那么您所需要做的就是将其存储在某个地方，并在需要时调用

cb（）

。或者您可能实际上有一个回调数组，每个回调数组都可以接收一些数据，因此您可以执行类似于

cbArray.forEach（cb=>cb（dataReturnedFromSomeCall））

的操作。如果你想要一个更复杂的结构，你可以将它们存储在一个对象中，但关键是你把它们放在某个地方，然后通过附加

（）

来执行它们。或者您可以

。应用

。致电

@DanielGrima，而不是更新问题

<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>

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

callbacks['test']();

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