框架后
FramePost是一个用于亲子iframe通信的库. 它旨在处理安全通信的细节,同时也提供方便用户的API,使iframecommuncation更能感觉使用API. 这通过建立 channel 父母与子女之间通过相互握手,然后才能进行任何其他逻辑.
父客户端
父母客户端负责与孩子一起初始化频道. 在建立信道时,母程序可能包含任意数据,作为 context 在握手过程中被送到儿童手中. 必须在 Iframe 完全装入后进行。强烈建议该频道在 onload 事件:
import { ParentClient } from '@datadog/framepost';
const client = new ParentClient();
const frame = document.createElement('iframe');
frame.src = 'https://domain.dom/path/to/frame.html';
const context = {
infoAboutParent: 'it is a demo',
}
frame.onload = () => {
client.requestChannel(frame, frame.src, context);
}
儿童客户端
儿童客户端在初始脚本执行时必须在iframe中初始化. 儿童可提供背景,供父母在儿童成长时握手时参考 context 配置选项 .
import { ChildClient } from '@datadog/framepost';
const context = {
infoAboutChild: 'It is a demo'
}
const client = new ChildClient({ context });
共享 API
初始握手成功后,每个客户端将使用共享API处理与对应方的通信.
client.getContext()数字 :
获取相反客户在握手过程中发送的上下文 :
// in parent
const contextFromChild = await client.getContext();
// in child
const contextFromParent = await client.getContext();
client.on()
对应方为: client.send()。订阅一个事件处理器,从相反客户端执行指定类型的事件。 事件密钥必须是独一无二的 。 返回未订阅的钩子 .
const unsubscribe = client.on('route_change', newRouteData => {
...
})
// later
unsubscribe();
client.send()
对应方为: client.on()。向相反客户端发送带有指定事件密钥和数据的事件。 事件密钥必须是独一无二的 :
client.send('event_key', dataAboutEvent);
client.request()数字 :
对应方为: client.onRequest(). 用于同步发送和接收来自相反客户端的数据的方便方法. 被设计成像基于承诺的 api 调用。 为了让往返请求正确运行 onRequest 带有匹配请求密钥的处理器必须在启动重排前在相反的客户端中收听. 见下文.
const data = await client.request('getMyData', requestParams);
client.onRequest()数字 :
对应方为: client.request()。接收请求从 a 发送的数据 client.request 呼叫相反的客户端。 执行所提供的处理器,将返回的回复发回相反的客户端.
client.onRequest('getMyData', async requestParams => {
const responseData = await doSomeStuff());
return responseData;
})
高级
调试模式
任一客户端都可以以调试模式初始化 :
const parentClient = new ParentClient({ debug: true });
const childClient = new ChildClient({ debug: true });
这将打印关于各种事件和错误的调试语句 .
剖析
酷特写警报! Framewost 将收集和报告每个频道处理的信息交易的时间安排配置。 为了启用,通过 profile: true 给每个客户端的 每个客户端将默默地收集可以在父端请求的数据 parentClient.getProfile()数字 :
// in child
const childClient = new ChildClient({ proile: true });
// in parent
child parentClient = new ParentClient({ profile: true });
// after channel init and a few transactions:
parentClient.getMessageProfile().then(profile => {
// do whatever you want with profile data
console.log(profile);
});