Package Exports

@netless/iframe-bridge

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@netless/iframe-bridge) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

IframeBridge

本项目主要用于转发白板的事件和属性到 iframe, 管理 iframe 的插入, 以及对白板的视角变化的跟随

注意, iframe 只有在教具为 选择工具 时候才能进行交互

安装

# npm
npm install @netless/iframe-bridge

# yarn
yarn add @netless/iframe-bridge

example

import {WhiteWebSdk} from "white-react-sdk"
import {IframeBridge, IframeWrapper} from "@netless/iframe-bridge"

const sdk = new WhiteWebSdk({
  // 其他参数
  invisiblePlugins: [IframeBridge],
  wrappedComponents: [IframeWrapper],
})

const room = await sdk.joinRoom()

let bridge;

bridge = room.getInvisiblePlugin(IframeBridge.kind) // bridge 插入一次后续会自动插入，所以需要先 get 防止重复插入

if (!bridge) {
    bridge = await IframeBridge.insert({
        room: room, // room 实例
        url: "example.com", // iframe 的地址
        width: 1280, // 课件的宽, 单位 px
        height: 720, // 课件的高, 单位 px
        displaySceneDir: "/example" // 自定义 h5 课件绑定的 scene 目录，切换到其他目录，课件会自动隐藏，注意，此目录需要用户在白板中自行创建
    })
}

`setIframeSize`

bridge.setIframeSize({ width: 1200, height: 700 }) // 修改 iframe 的宽高

`attributes`

attributes 是会在所有插件中同步的属性, 类似于白板中的 globalState 概念, 但是只是同步在所有的插件中

bridge.attributes

`setAttributes`

修改 attributes, 并且会触发事件传递 attributes 到 iframe 中

readOnly 模式下不可用

bridge.setAttributes({ name: "bridge" })

`on`

监听 iframe``load 事件

import { DomEvents } from "@netless/iframe-bridge"

bridge.on(DomEvents.IframeLoad, (event) => {
    // code
})

`destroy`

销毁插件

bridge.destroy()

在特定 `scene` 中使用 `H5` 课件

const dir = "/example" // h5 课件在白板中的目录名称，可以自定义为任意名称，注意不要跟已有目录重复
const scenes = [{name: "第一页"}, { name: "第二页" }] // h5 课件有多少页可以创建多少个, 但并不是严格对应
room.putScenes(dir, scenes)

room.setScenePath("/example/第一页") // 设置为课件目录的第一页

翻页可以使用 sdk 封装的翻页，也可以自己调用白板的翻页参考: 白板翻页

// 白板翻页
room.setSceneIndex(room.state.sceneState.index - 1); // 上一页
room.setSceneIndex(room.state.sceneState.index + 1) // 下一页

切换课件

bridge.setAttributes({ url: "https://xxxx.com" })

@netless/iframe-bridge

Package Exports

Readme

IframeBridge

安装

example

setIframeSize

attributes

setAttributes

on

destroy

在特定 scene 中使用 H5 课件