如何在点击按钮时调用gapi iframe注册的onproductselect回调函数

触发已注册回调的实现方案 #

你通过iframe.register()注册的是跨iframe事件监听函数，需要对应事件的发送方调用send()方法推送同名事件，即可触发该回调，根据测试按钮所在位置不同，实现代码如下：

测试按钮在子iframe内部 #

在子iframe的代码中先获取iframe上下文，给按钮绑定点击事件后发送onproductselect事件即可：

// 子iframe内初始化gapi上下文
const childContext = gapi.iframes.getContext();

// 绑定测试按钮点击事件
document.querySelector('#test-btn').addEventListener('click', () => {
  // 发送事件到父窗口，第二个参数为自定义透传的event数据
  childContext.send('onproductselect', {
    productId: 'test_001',
    productInfo: '测试商品数据'
  });
});

测试按钮在父窗口 #

如果测试按钮放在父窗口，可以直接通过你持有的子iframe实例发送事件触发回调：

// 你之前调用openChild获取的iframe实例
const childIframe = gapi.iframes.getContext().openChild(options);

// 你原有注册回调的代码
childIframe.register('onproductselect', function(event) {
  console.log(event);
}, gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER);

// 父窗口测试按钮点击事件
document.querySelector('#parent-test-btn').addEventListener('click', () => {
  // 向子iframe发送事件，走完整跨域通信流程，和真实业务触发逻辑完全一致
  childIframe.send('onproductselect', {
    productId: 'test_001',
    productInfo: '测试商品数据'
  });
});

注意事项 #

• 父窗口和子iframe都需要提前加载gapi iframe相关SDK，否则会出现上下文不存在报错
• 发送的事件名必须和注册时的onproductselect完全一致，大小写敏感
• 跨域场景下需确保CROSS_ORIGIN_IFRAMES_FILTER过滤规则和你的业务域名匹配，避免消息被拦截。

内容的提问来源于stack exchange，提问作者Asha