H5 Iframe通信协议

数据传输规范

{
  from: 'bingo', // string 主窗口（我方）：bingo，子窗口（短剧方）：playlet
  event: 'getDomain', // string 协议名称
  payload: {} // any 额外数据 
}

示例

短剧方向我方发送数据

// 短剧方发送协议
window.parent.postMessage(JSON.stringify({
  from: 'playlet',
  event: 'getDomain',
  payload: 'https://uath5.d43c4a2.com'
}), '*')

// 我方接收协议
window.addEventListener('message', function (e) {
  try {
    let data = JSON.parse(e.data)
    if (data.from === 'playlet' && data.event === 'getDomain') {
      console.log(e.data.payload)
    }
  } catch (error) {
    console.log(error)
  }
})

我方向短剧方发送数据

// 我方发送协议
playletIframe.contentWindow.postMessage(JSON.stringify({
  from: 'bingo',
  event: 'getDomain',
  payload: 'https://uath5.d43c4a2.com'
}), '*')

// 短剧方接收协议
window.addEventListener('message', function (e) {
  try {
    let data = JSON.parse(e.data)
    if (data.from === 'bingo' && data.event === 'getDomain') {
      console.log(e.data.payload)
    }
  } catch (error) {
    console.log(error)
  }
})

需实现协议

跳转登录

点击短剧页内的 signIn 按钮触发，由短剧方发出事件。

{
  from: 'playlet',
  event: 'login',
  payload: {}
}