Frame双向通信插件FrameDataTrans
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发送请求,反过来也是可以的
Frame双向通信插件FrameDataTrans的更多相关文章
- XSS 前端防火墙 —— 天衣无缝的防护
上一篇讲解了钩子程序的攻防实战,并实现了一套对框架页的监控方案,将防护作用到所有子页面. 到目前为止,我们防护的深度已经差不多,但广度还有所欠缺. 例如,我们的属性钩子只考虑了 setAttribut ...
- XSS 前端防火墙(4):天衣无缝的防护
例如,我们的属性钩子只考虑了 setAttribute,却忽视还有类似的 setAttributeNode.尽管从来不用这方法,但并不意味人家不能使用. 例如,创建元素通常都是 createEleme ...
- 关于HTML5 boilerplate 的一些笔记
最近在研究HTML5 boilerplate的模版,以此为线索可以有条理地学习一些前端的best practice,好过在W3C的文档汪洋里大海捞针……啊哈哈哈…… 开头的IE探测与no-js类是什么 ...
- HTML5 boilerplate 笔记(转)
最近在研究HTML5 boilerplate的模版,以此为线索可以有条理地学习一些前端的best practice,好过在W3C的文档汪洋里大海捞针……啊哈哈哈…… 开头的IE探测与no-js类是什么 ...
- IE 加速插件之 Google Chrome Frame
前言 IE 8 及以下版本的速度较慢. 特别是前端的js 和 css 内容较多时尤为突出. 就笔者的开发经验来说GWT, Ext JS, raphael , draw2d 等开发的系统在IE下使用是相 ...
- Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告
最近在做基于jenkins ant junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...
- 动手做第一个Chrome插件
Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...
- Vuforia结合Skyshop: Image-Based Lighting Tools & Shaders插件实现真实的光照效果
Skyshop: Image-Based Lighting Tools & Shaders 插件地址:https://www.assetstore.unity3d.com/en/#!/cont ...
- jQuery插件之ajaxFileUpload异步上传
介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...
随机推荐
- 使用Husky提升你的项目规范
使用 ESLint, Prettier, Husky, Lint-staged 提升你的项目规范 本文写于 2020 年 11 月 7 日 大家应该都知道 ESLint 与 prettier,他们的用 ...
- php魔术方法小结
php魔术方法 __construct() __construct(mixed ...$values = ""): void PHP 允许开发者在一个类中定义一个方法作为构造函数. ...
- docker 1.2 之docker基本用法
1.docker的基本用法 镜像相关操作:dockerhub查找镜像,例如查找centos的镜像 [root@elk ~]# docker search centos NAME DESCRIPTION ...
- 好客租房6-React脚手架的应用(细节)
3.2使用react脚手架初始化 npx命令介绍 npm v5.2.0引入的一条命令 目的:提升包内提供的命令行工具的使用体验 原先:先安装脚手架包 再使用这个包中提供的命令 现在无需安装脚手架包 就 ...
- 第06组 Beta冲刺 (1/6)
目录 1.1 基本情况 1.2 冲刺概况汇报 1.郝雷明 2. 方梓涵 3.曾丽莉 4.黄少丹 5. 董翔云 6.杜筱 7.鲍凌函 8.詹鑫冰 9.曹兰英 10.吴沅静 1.3 冲刺成果展示 1.1 ...
- Go中rune类型浅析
一.字符串简单遍历操作 在很多语言中,字符串都是不可变类型,golang也是. 1.访问字符串字符 如下代码,可以实现访问字符串的单个字符和单个字节 package main import ( &qu ...
- 深入C++02:深入学习C++还必须掌握的基础
深入学习C++还必须掌握的基础 掌握形参带默认的函数 1.给默认值方向:从右向左给默认值: 2.调用效率:如果传默认值或者立即数(不需要从容器或内存取取的数字)的话都是直接将数字直接push进栈:没有 ...
- 高通(QCOM)sensor bring up
高通7150平台 1.添加驱动文件 2.添加编译 3.配置json文件 4.高通默认配置 5.部分sensor外挂电源 6.遇到的问题 1.添加驱动文件 路径:adsp_proc/ssc/sensor ...
- 【clickhouse专栏】clickhouse性能为何如此卓越
在<clickhouse专栏>上一篇文章中<数据库.数据仓库之间的区别与联系>,我们介绍了什么是数据库,什么是数据仓库,二者的区别联系.clickhouse的定位是" ...
- WinForms获得已打开窗体的引用
更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月6日. 对于已经打开的窗口,可以通过Application.OpenForms属性进行获得.该属性是一个FormCollectio ...