iframe嵌套
最后更新于 2023/07/05 阅读数 1694
iframe嵌套
对想把功能融合进自有平台的生态伙伴,可以通过把登录指定用户获取到的登录地址写入iframe的形式,嵌套入主业务的前端页面。具体流程如下:
iframe事件
通过上边方式进行嵌套的iframe,会向主 window
发送 message
,主 window
可以通过监听 message
来实现一定的数据交互,如:
window.addEventListener("message", event => {
if (event.data.type === "loginSuccess") {
console.log("登录成功")
}
})
1
2
3
4
5
plaintext2
3
4
5
发送message
列表:
登录成功loginSuccess
返回数据:
{ type: "loginSuccess", data: { id: "some-user-id", // 当前登录用户的id name: "XX有限公司", // 当前登录用户的名称 routes: [ // 可用的菜单 { group_name: "呼叫中台", route: "workbench/outbound", name: "AI外呼" } ] } }
1plaintext
2
3
4
5
6
7
8
9
10
11
12
13
14token过期loginError
返回数据:
{ type: "loginError", data: { } }
1plaintext
2
3
4
5新建任务taskCreateSuccess
返回数据:
{ type: "taskCreateSuccess", data: { id // 新建任务后返回任务ID } }
1plaintext
2
3
4
5
6接收
message
列表:跳转路由goTo
let iframe = document.getElementById('iframe') // 获取iframe的dom元素 iframe.contentWindow.postMessage({type: 'goTo', path: '/workbench/outbound'}, '*')
1plaintext
2path
需要是可使用的路由该方法可替换修改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>
1plaintext或者用js动态添加
var iframe = document.querySelector('#iframe') if (iframe) { iframe.allow = 'camera *; microphone *' iframe.src = 'https://' 注意:在src赋值前,设置allow授权 }
1plaintext
2
3
4
5
6
评价这篇文档
有帮助
没帮助
未能解决您的问题?请联系
在线客服