旧库见文章:https://www.cnblogs.com/wuhairui/p/14595893.html

新版库主要做了下多个iframe和父页面交互的优化。主要使用构造函数的方式将多个iframe的交互使用多个对象进行区分,这样多个交互就可以互相独立了。

并可子页面主动调用传值给父页面。

新版代码:

/**
* iframeId iframe的id
* parentName 父窗口名,一般不改
* childName 子窗口名 多个iframe时需要使用
* postMessage 父窗口调用 需要子页面加载完成后才能执行到
* returnData 子窗口主动回应
* callback 父窗口调用后子窗口判断
*/
(function (w) {
function HerryPostMessage(iframeId = 'iframe') {
this.iframeId = iframeId;
this.parentName = '父窗口';
this.childName = '子窗口';
//跨域对象
this.messageObj = {}; /**
* 监听父页面发送的数据
*/
w.addEventListener(
"message",
async (event) => {
const { data } = event;
if (data && typeof data === "object" && data.name === this.parentName) {
if (this.callback) {
this.callback(data)
}
}
},
false
); /**
* 监听子页面返回的数据
*/
w.addEventListener(
"message",
(event) => {
const { data } = event;
if (data && typeof data === "object" && data.name === this.childName) {
if(this.messageObj[data.action]) {
this.messageObj[data.action](data);
}
}
},
false
);
} //父页面
/**
* 发送给子页面数据
*/
HerryPostMessage.prototype.postMessage = function(data, fn = null) {
const iframe = document.getElementById(this.iframeId)
iframe.contentWindow.postMessage(
{
name: this.parentName, //父页面名字
...data,
},
"*"
);
this.messageObj[data.action] = fn;
}; //子页面
/**
* 返回数据给父页面 参1=当前action 参2=返回的数据
*/
HerryPostMessage.prototype.returnData = function(action, data) {
top.postMessage(
{
name: this.childName, //子页面名字
action,
data,
},
"*"
);
}; //抛出
w.HerryPostMessage = HerryPostMessage;
})(window);

使用方法:

父子页面均引入herryPostMessage.js。

父页面:

引入子页面b1,设置一个id

<iframe id="b1" src="//localhost:8081/b1.html" frameborder="0"></iframe>

创建对象,参数传参为iframe的id,设置对象的childName也同名。

父子页面均加载后,调用对象的postMessage方法,传入action,data可传可不传。第二个参数为子页面的回调。

const b1 = new HerryPostMessage('b1')
b1.childName = 'b1';
//此处需要延迟 因为到登录子页面加载完毕
setTimeout(() => {
b1.postMessage({action:'geta',data: '父页面传给子页面的数据'},(res) => {
console.log('父页面打印',res.data)
})
},500)

子页面:

创建该页面的对象(一般和父页面创建的同名)

创建callback函数,做判断,父页面调用后,会进入到这里。处理后可以使用对象的returnData方法将数据传回给父页面的回调函数中。

const b1 = new HerryPostMessage('b1');
b1.childName = 'b1';
b1.callback = (data) => {
if(data.action === 'geta') {
//获取到父页面传来的数据
console.log('子页面打印',data.data)
//子页面回传给父页面数据
b1.returnData('geta','子页面回传给父页面数据')
}
}

另外,在子页面中直接调用returnData也可以主动传回给父页面数据

setTimeout(() => {
b1.returnData('geta','子页面主动传给父页面数据')
},1000)

效果:

跨域库herryPostMessage.js的一些优化,多iframe跨域的更多相关文章

  1. 封装一个postMessage库,进行iframe跨域交互

    这是近期个人在开发chrome插件时的其中一个小总结.还有很多没有总结出来.因为目前插件还在迭代中,(herry菌插件,用于B站C站),属于个人业余的一个小项目.还有很多功能没有实现,以及还需要再看能 ...

  2. iframe跨域访问

    js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决 ...

  3. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  4. js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. JS、JQuery和ExtJs的跨域处理

    1.什么是跨域?跨域,JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a. ...

  6. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  7. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  9. js iframe跨域访问

    1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...

随机推荐

  1. WEB 用视频替换GIF动画

    原文 download ffmpeg gif to video 转化后文件大小大大降低 $ ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcod ...

  2. 两百万SPC空投来袭,带动市场热情!

    NGK投放项目的时间节点总是以牛市为主,像是上一次的BGV项目投放就在2020年末的数字加密货币牛市,其结果想必各位生态建设者们都已经见到了,在登陆交易所首日便高收于近889美金,创下惊人的近一千七百 ...

  3. SSL (Secure Sockets Layer)

    本文转载自SSL (Secure Sockets Layer) TLS简介 The Transport Layer Security (TLS) protocol aims primarily to ...

  4. SpringCloud之服务降级

    1.Hystrix(断路器) 1.1定义 扇出:多个微服务调用的时候,假设微服务A调用微服务B和C,微服务B和C又调用其他的服务.服务雪崩:如果扇出的链路上某个微服务的调用时间过长或不可用,对微服务A ...

  5. OAuth2.0安全设计之Authorization Code

    OAuth 2.0 有 4 种认证流程: 授权码模式(authorization code) 简化模式(implicit) 密码模式(resource owner password credentia ...

  6. msfconsole 常用命令记录

    Metasploit是一款开源的渗透测试框架,它现在还在逐步发展中,下面介绍的一些功能和命令,可能会在未来失效. Metasploit框架提供了多种不同方式的使用接口: msfgui msfconso ...

  7. Graylog日志管理单机部署、日志节点的Sidecar配置以及简单的警告事件邮件发送

    应该是上个星期的上个星期,下了个任务,要做Graylog的部署以及文档,emmm....带log,肯定是和日志有关系了呗,不过也没听过啊,去搜了一下,确实,也不少帖子博客相关的都有安装部署,还是yum ...

  8. springAop:Aop(Xml)配置,Aop注解配置,spring_Aop综合案例,Aop底层原理分析

    知识点梳理 课堂讲义 0)回顾Spring体系结构 Spring的两个核心:IoC和AOP 1)AOP简介 1.1)OOP开发思路 OOP规定程序开发以类为模型,一切围绕对象进行,OOP中完成某个任务 ...

  9. 04-Spring自定义标签解析

    自定义标签的解析 这一篇主要说明自定义标签的解析流程,除了 bean.alias.import.beans之外的标签,都属于自定义标签的范围,自定义标签的解析需要命名空间配合, 获取对应的命名空间 根 ...

  10. 2019 GDUT Rating Contest I : Problem G. Back and Forth

    题面: G. Back and Forth Input file: standard input Output file: standard output Time limit: 1 second Mem ...