Frame双向通信插件FrameDataTrans
2024-10-20 16:14:49
FrameDataTrans教程
博客园 乳鸽菌 20220729
核心原理是使用postMessage发送数据,window.addEventListener("message",fun)监听。
插件地址
index.htm
// <iframe id="fr" src="child.html"></iframe>
var iFrameDom =document.getElementById("fr");
//创建实例
var frameDataTrans = window.createFrameDataTrans(
window,
iFrameDom.contentWindow
);
//两种pos方式
frameDataTrans.post("getText", {text:"111"}, function (data) {
console.log(data);//{text:"222"}
});
var data = await frameDataTrans.postAsync("getText",{text:"111"});
console.log(data);//{text:"222"}
child.html
const frameDataTrans = window.createFrameDataTrans(window, window.parent);
//两种接收pos的方式
frameDataTrans.bindPost("getText", () => {
//使用的时候允许不使用return
return {text:"222"};
});
frameDataTrans.bindPostCallback("getText", (reqData, resFun) => {
//resFun允许不符合数据
resFun({text:"222"});
});
上面例子演示的是index向child发送请求,反过来也是可以的
最新文章
- Win8电脑蓝屏并提示dpc_watchdog_violation
- 高速PCB之EMC设计47则
- VMware Fusion DHCP方式下如何指定虚拟机IP地址
- 关于promise(一)
- Warning: Multiple build commands for output file /xxx
- R语言randomForest包实现随机森林——iris数据集和kyphosis数据集
- P102、面试题14:调整数组顺序使奇数位于偶数前面
- 假如我来架构12306网站---文章来自csdn(Jackxin Xu IT技术专栏)
- Windows 系统下安装 dig 命令
- python 3.6 lxml标准库lxml的安装及etree的使用注意
- <;Dare To Dream>;第五次作业:团队项目需求改进与系统设计
- 描点的改进:运用chart画图。
- 关于cmd命令
- linux相关介绍
- this和super用法详解
- lcd 控制器
- VS创建工程出错解决方案
- ntpd与ntpdate的区别
- 【入门详解】MyBatis入门基础详解
- Java 创建多线程的三种方法
热门文章
- 98. 验证二叉搜索树 前序遍历解法以及后续遍历解法(go语言)
- Go内存管理一文足矣
- 无法启动报,To install it, you can run: npm install --save @/components/xxxx.vue
- 第06组 Beta冲刺 (2/5)
- [XJOI3529] 左右
- IDEA windows版本快捷键
- MySQL、SqlServer、Oracle,这三种数据库的优缺点,你知道吗?
- .NET C#基础(4):属性 - 本质是方法
- 剖析虚幻渲染体系(15)- XR专题
- GDKOI 2021 Day1 PJ 爆炸记