知识中心
所有文章
帮助中心
AI客户联络中心 升级日志
API文档
AI客户联络
API接口
白标接口及地址
iframe嵌套
最后更新于 2023/12/20   阅读数 1075

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 *'
      }
      
      1
      2
      3
      4
      plaintext
未能解决您的问题?请联系
本篇目录

iframe嵌套

iframe事件

iframe麦克风权限