知识库
所有文章
帮助中心
AI客户联络中心 升级日志
API文档
AI客户联络
iFrame嵌套
白标接口及地址
行业案例
iframe嵌套
最后更新于 2022/08/09 13:20:52

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

发送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
  2. token过期loginError

    返回数据:

    {
        type: "loginError",
        data: {
        }
    }
    
    1
    2
    3
    4
    5
  3. 新建任务taskCreateSuccess

    返回数据:

    {
        type: "taskCreateSuccess",
        data: {
            id  // 新建任务后返回任务ID 
        }
    }
    
    1
    2
    3
    4
    5
    6

接收message列表

  1. 跳转路由goTo

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

    path需要是可使用的路由

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

    • 如果需要自行处理路由的伙伴,可以通过修改iframesrc属性,达到控制iframe内部路由的目的,如修改为 https://crm.com/#/workbench/outbound 则会跳转至AI外呼模块。
未能解决您的问题?请联系
本篇目录