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的更多相关文章

  1. XSS 前端防火墙 —— 天衣无缝的防护

    上一篇讲解了钩子程序的攻防实战,并实现了一套对框架页的监控方案,将防护作用到所有子页面. 到目前为止,我们防护的深度已经差不多,但广度还有所欠缺. 例如,我们的属性钩子只考虑了 setAttribut ...

  2. XSS 前端防火墙(4):天衣无缝的防护

    例如,我们的属性钩子只考虑了 setAttribute,却忽视还有类似的 setAttributeNode.尽管从来不用这方法,但并不意味人家不能使用. 例如,创建元素通常都是 createEleme ...

  3. 关于HTML5 boilerplate 的一些笔记

    最近在研究HTML5 boilerplate的模版,以此为线索可以有条理地学习一些前端的best practice,好过在W3C的文档汪洋里大海捞针……啊哈哈哈…… 开头的IE探测与no-js类是什么 ...

  4. HTML5 boilerplate 笔记(转)

    最近在研究HTML5 boilerplate的模版,以此为线索可以有条理地学习一些前端的best practice,好过在W3C的文档汪洋里大海捞针……啊哈哈哈…… 开头的IE探测与no-js类是什么 ...

  5. IE 加速插件之 Google Chrome Frame

    前言 IE 8 及以下版本的速度较慢. 特别是前端的js 和 css 内容较多时尤为突出. 就笔者的开发经验来说GWT, Ext JS, raphael , draw2d 等开发的系统在IE下使用是相 ...

  6. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  7. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  8. Vuforia结合Skyshop: Image-Based Lighting Tools & Shaders插件实现真实的光照效果

    Skyshop: Image-Based Lighting Tools & Shaders 插件地址:https://www.assetstore.unity3d.com/en/#!/cont ...

  9. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

随机推荐

  1. NLTK基础学习

    学习视频来自:Youtube 学习文档来自:简书 NLTK:自然语言工具包 目的:将段落拆分为句子.拆分词语,识别这些词语的词性,高亮主题,帮助机器了解文本关于什么.这个小节将解决意见挖掘或情感分析的 ...

  2. NLP教程(7) - 问答系统

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/36 本文地址:http://www.showmeai.tech/article-det ...

  3. TS 自学笔记(二)装饰器

    TS 自学笔记(二)装饰器 本文写于 2020 年 9 月 15 日 上一篇 TS 文章已经是很久之前了.这次来讲一下 TS 的装饰器. 对于前端而言,装饰器是一个陌生的概念,但是对于 Java.C# ...

  4. 6┃音视频直播系统之 WebRTC 核心驱动SDP规范协商

    一.什么是SDP SDP(Session Description Protocal)其实就是当数据过来时候,告诉数据自己这里支持的解码方式.传输协议等等,这样数据才能根据正确的方式进行解码使用 SDP ...

  5. scanf("%d",a[i]+j)为什么不加取地址符号

    为什么我画的地方不加取地址符号? 不要在意标题为什么不加分号,因为长度太长了! 二维数组a[3][5]中,a[3]储存的是下一维的地址,a[1]等同于&a[1][0] 同理,a[1]+1等于& ...

  6. [漏洞复现] [Vulhub靶机] Tomcat7+ 弱口令 && 后台getshell漏洞

    免责声明:本文仅供学习研究,严禁从事非法活动,任何后果由使用者本人负责. 0x00 背景知识 war文件 0x01 漏洞介绍 影响范围:Tomcat 8.0版本 漏洞类型:弱口令 漏洞成因:在tomc ...

  7. ZIP压缩输入/输出

    学习内容: 一.压缩文件 1.利用ZipOutputStream类对象,可将文件压缩. 2.ZipOutputStream类构造方法:ZipOutputStream(OutputStream out) ...

  8. python常用标准库(时间模块 time和datetime)

    常用的标准库 time时间模块 import time time -- 获取本地时间戳 时间戳又被称之为是Unix时间戳,原本是在Unix系统中的计时工具. 它的含义是从1970年1月1日(UTC/G ...

  9. React简单教程-5-使用mock

    前言 一个前后端分离的项目,前端人员需要对接后端的接口.如果在后端的接口没有开发好,或者没有测试版可以对接的情况下,前端人员也不能坐等后端接口写好后再开始开发. 一个项目的,理想情况下接口的规范应该是 ...

  10. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...