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列表

登录成功 loginSuccess

返回数据：

{
    "type": "loginSuccess",
    "data": {
        "id": "some-user-id",
        "name": "XX有限公司",
        "routes": [
            {
                "group_name": "呼叫中台",
                "route": "workbench/outbound",
                "name": "AI外呼"
            }
        ]
    }
}

token过期 loginError

返回数据：

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

新建任务 taskCreateSuccess

返回数据：

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

接收message列表

跳转路由 goTo

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

• path 需要是可使用的路由
• 该方法可替换修改iframe的src，减少加载各类静态文件，提升速度

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

iframe麦克风权限

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

解决方案

首先检查确认页面是否能不能获取到权限，给iframe标签添加 allow="camera; microphone" 属性：

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

或者用js动态添加：

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