iframe嵌套

对想把功能融合进自有平台的生态伙伴，可以通过把登录指定用户获取到的登录地址写入iframe的形式，嵌套入主业务的前端页面。具体流程如下：

1. 对接用户注册，完成创建用户，并和自有账户进行关联；

2. 对接登录指定用户获取登录地址，创建<iframe src=""></iframe>元素，并把该 url 赋值给 src 属性；

iframe事件

通过上边方式进行嵌套的iframe，会向主 window 发送 message，主 window 可以通过监听 message 来实现一定的数据交互，如：

window.addEventListener("message", event => {
    if (event.data.type === "loginSuccess") {
        console.log("登录成功")
    }
})

发送message列表：

1. 登录成功loginSuccess

   返回数据：

   {
       type: "loginSuccess",
       data: {
           id: "some-user-id", // 当前登录用户的id
           name: "XX有限公司", // 当前登录用户的名称
           routes: [ // 可用的菜单
               {
                   group_name: "呼叫中台",
                   route: "workbench/outbound",
                   name: "AI外呼"
               }
           ]
       }
   }
   

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   

   plaintext

2. token过期loginError

   返回数据：

   {
       type: "loginError",
       data: {
       }
   }
   

   1
   2
   3
   4
   5
   

   plaintext

3. 新建任务taskCreateSuccess

   返回数据：

   {
       type: "taskCreateSuccess",
       data: {
           id  // 新建任务后返回任务ID 
       }
   }
   

   1
   2
   3
   4
   5
   6
   

   plaintext

   接收message列表：

4. 跳转路由goTo

   let iframe = document.getElementById('iframe') // 获取iframe的dom元素
   iframe.contentWindow.postMessage({type: 'goTo', path: '/workbench/outbound'}, '*')
   

   1
   2
   

   plaintext

   path需要是可使用的路由

   该方法可替换修改iframe的src，减少加载各类静态文件，提升速度

   1. 如果需要自行处理路由的伙伴，可以通过修改iframe的src属性，达到控制iframe内部路由的目的，如修改为 https://crm.com/#/workbench/outbound 则会跳转至AI外呼模块。
      

   iframe麦克风权限

   iframe嵌套页面无法调取麦克风，摄像头权限

   1. 首先检查确认页面是否能不能获取到权限

   2. 给iframe标签添加  allow="camera; microphone"属性

      <iframe id="iframe" src="xxx" allow="camera *; microphone *"></iframe>
      

      1
      

      plaintext

      或者用js动态添加

      var iframe = document.querySelector('#iframe')
      if (iframe) {
        iframe.allow = 'camera *; microphone *'
        iframe.src = 'https://'
        注意：在src赋值前，设置allow授权
      }
      

      1
      2
      3
      4
      5
      6
      

      plaintext