云蝠智能 AI知识中心
所有文章
完整版
完整版
客户端
API文档
升级日志
合作伙伴
基础知识
产品介绍
帮助中心
API文档
数字人
AI客户联络
开发指引
API接口
回调
AI语音质检
白标接口及地址
AI客户联络中心 升级日志
数字人升级日志
线索挖掘 升级日志
业务常见问题QA
其他文档
行业案例
iframe嵌套
最后更新于 2023/07/05   阅读数 1694

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("登录成功")
    }
})
1
2
3
4
5
plaintext

发送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',&nbsp;path: '/workbench/outbound'}, '*')
    
    1
    2
    plaintext

    path需要是可使用的路由

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

    1. 如果需要自行处理路由的伙伴,可以通过修改iframesrc属性,达到控制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
未能解决您的问题?请联系
本篇目录

iframe嵌套

iframe事件

iframe麦克风权限