小班课第三方弹窗
简介
** 功能介绍 **
联系百家云技术支持在账号级别配置一个url地址,百家云在小班课教室内使用iframe嵌套这个链接,实现百家云教室与客户网页间的通信
** 注意事项 **
仅支持小班课PC端使用,后续版本会支持APP以及大班课
通信机制
BJYWebpage
提供了iframe和外层交互的桥梁,BJYWebpage
是单例模式,一个页面中只能存在一个instance
实例。
百家云会在您提供的链接后面拼上教室信息参数,如您提供的域名为https://www.baijiayun.com
,百家云在教室内访问时使用的地址为https://www.baijiayun.com?classId=xxx&userId=123&userNumber=123&userName=123&userType=1
请引入以下地址的桥接文件:
https://www.baijiayun.com/js-sdk/1.25.0/tool/bjyBridge/BJYWebpage.js
BJYWebpage
*** 在页面onload回调中执行 ***
- 使用
getInstance
获取示例对象,onMessageReceive
接收百家云页面发送的消息
instance = BJYWebpage.getInstance({
onMessageReceive: function (data) {
console.log(JSON.stringify(data));
}
})
- 调用
instance.getReady()
通知百家云页面加载完成 - 调用
instance.sendMessage()
向百家云页面发送消息
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试webpage</title>
</head>
<body>
<script src="https://www.baijiayun.com/js-sdk/1.25.0/tool/bjyBridge/BJYWebpage.js"></script>
<script>
var instance;
var USER_TYPE = {
STUDENT: 0,
TEACHER: 1,
ADMIN: 2
}
var url = location.search;
var query = {};
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
query[strs[i].split("=")[0]] = strs[i].split("=")[1];
}
}
// query数据格式示例 {classId: "20060393794752", userId: "17916900", userNumber: "937947521", userName: "123", userType: "1"}
// userType代表当前的用户类型 0 学生 1 老师 2 助教
window.onload = function () {
instance = BJYWebpage.getInstance({
onMessageReceive: function (data) {
console.log(JSON.stringify(data));
// 接收到老师点击上课的通知
if (data.key == 'class_start') {
// 判断是老师发送以下提示
if (query.userType == USER_TYPE.TEACHER) {
setTimeout(function () {
instance.sendMessage({
key: 'webpage_alert',
content: '请给学生点赞'
})
}, 60 * 1000);
setTimeout(function () {
instance.sendMessage({
key: 'webpage_alert',
content: '请发布答题器'
})
}, 3 * 60 * 1000);
setTimeout(function () {
instance.sendMessage({
key: 'webpage_alert',
content: '请邀请学生发言'
})
}, 5 * 60 * 1000);
} else if (query.userType == USER_TYPE.STUDENT) {
setTimeout(function () {
instance.sendMessage({
key: 'webpage_alert',
content: '请举手'
})
}, 60 * 1000);
}
}
}
});
instance.getReady();
}
</script>
</body>
</html>