文档章节

附实例!实现iframe父窗体与子窗体的通信

腾讯云加社区
 腾讯云加社区
发布于 11/16 10:32
字数 1709
阅读 6
收藏 1

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

本文由前端林子发表于云+社区专栏

本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。同时本文会提供一个可运行的实例代码,实现在父窗体中,获取到来自子窗体的数据的效果。

0.背景介绍

(1)需要在当前的前端项目中,使用iframe嵌套别的站点页面。

(2)当子窗体触发了一个事件后,要给父窗体传一个跳转地址的url。父窗体监听到这个事件后,根据接收到的url,来更新当前父窗体的url,实现页面的跳转。

1.采用方案

1.1 MessengerJS方案

可以采用MessengerJS方案,该方案可以实现父窗体与iframe之间的通信、多个iframe之间的通信。不过要前提是要确保对不同域的页面有修改权限,并且父窗体、子窗体页面都要同时加载这个MessengerJS。

1.2 使用方法

(1) 在需要通信的父窗体、和子窗体的文档中,都需要引入MessengerJS。

(2) 父窗体和子窗体各自的文档(document)中,都需要自己的Messenger与其他文档通信,父窗体和子窗体的window对象都对应着有且仅有一个Messenger对象,该Messenger对象会负责当前window的所有通信任务。因此,每个Messenger对象都需要唯一的名字,这样它们之间才可以知道是在跟谁通信。另外,MessengerJS方案推荐指定项目名称,(类似命名空间的作用),以增强代码健壮性与组件复用性,避免未来与其他项目冲突。(注意: 项目名称应使用字符串类型)

父窗体与子窗体初始化Messenger对象:

 // 父窗口中 - 初始化Messenger对象
 // 推荐指定项目名称, 避免Mashup类应用中, 多个开发商之间的冲突
 var messenger = new Messenger('Parent', 'projectName');

 // iframe中 - 初始化Messenger对象
 // 注意! Messenger之间必须保持项目名称一致, 否则无法匹配通信
 var messenger = new Messenger('iframe1', 'projectName');

 // 多个iframe, 使用不同的名字
 var messenger = new Messenger('iframe2', 'projectName');

(3) 在发现消息前,目标文档要确保已经监听了消息事件:

 messenger.listen(function(msg){
 	alert("收到消息: " + msg);
 });

(4) 父窗体想给子窗体发信息,要添加消息对象,明确告知当前的父窗体,要发送消息的子窗体的window引用与messenger对象的名字:

// 父窗口中 - 添加消息对象, 明确告诉父窗口iframe的window引用与名字
 messenger.addTarget(iframe1.contentWindow, 'iframe1');

 // 父窗口中 - 可以添加多个消息对象
 messenger.addTarget(iframe2.contentWindow, 'iframe2');

(5) 发消息时,要指定messenger的名字和消息,例如父窗体要给子窗体发消息:

 // 父窗口中 - 向单个iframe发消息
 messenger.targets['iframe1'].send(msg1);
 messenger.targets['iframe2'].send(msg2);
 // 父窗口中 - 向所有目标iframe广播消息
 messenger.send(msg);

2.实例

基于上面的介绍,下面要实现开篇提出的需求了(实例代码只是示例如何传递数据,没有更改父窗体url)。这里分别是父窗体和子窗体的代码实现,可直接在浏览器中打开查看效果,其中messenger.js可以在这里下载,放到项目目录下。

父窗体:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父窗体</title>
    <style type="text/css"></style>
    <!-- 这个messenger.js可下载放到项目目录下 -->
    <script type="text/javascript" src="./messenger.js"></script>

</head>

<body>
    <div>这是父窗体</div>
    <div id="msg"></div>
    <iframe id="iframe1" name="iframe1" src="./child.html" width="600px" height="316px" style="z-index: 100000;position: absolute;">
    </iframe>
</body>
<script type="text/javascript">
    //父页面中,注册一个messager到一个统一的项目中,第一个参数为自己页面的名称,第二个参数为项目名称
    var messenger = new Messenger('parent', 'monitor'),
        iframe1 = document.getElementById('iframe1');

    //父页面中绑定监听消息事件,当接受到iframe1发来的消息后执行
    messenger.listen(function (msg) {
        // alert(msg);
        var oDiv = document.getElementById("msg");
        oDiv.innerHTML += msg;
        //todo
    });
</script>

</html>

子窗体:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>子窗体</title>
    <style type="text/css"></style>
    <!-- 这个messenger.js可下载放到项目目录下 -->
    <script type="text/javascript" src="./messenger.js"></script>

</head>

<body>
    <div style="background: #8CB08B;height:300px;">
        <div>这是子窗体</div>
        <input type="button" onclick="sendMessage('这是一条来自子窗体的消息!')" value="按钮" />
    </div>
</body>
<script type="text/javascript">
    //子页面中,注册一个messager到一个统一的项目中,第一个参数为自己页面的名称,第二个参数为项目名称
    var messenger = new Messenger('iframe1', 'monitor');

    //添加消息对象, 明确告诉子窗口iframe的window引用与名字
    messenger.addTarget(window.parent, "parent");

    function sendMessage(msg) {
        messenger.targets["parent"].send(msg);
    }
</script>

</html>

代码解释:

父窗体中嵌入iframe,要先引入messenger.js,同时初始化messenger到一个统一的项目中,其中第一个参数为自己页面messenger对象的名字,第二个参数为项目名称;然后父窗体要绑定监听消息事件,当接收到iframe子窗体发来的消息后执行。

子窗体也要先引入messenger.js,同时初始化一个messenger到一个统一的项目中,其中第一个参数为自己页面messenger对象的名字,第二个参数为项目名称;然后添加消息对象,告知子窗体的window引用与messenger对象的名字。然后在触发onclick事件时,向父窗口传递消息。发消息时,要指定接收消息的父窗体的messenger的名字,以及传递的消息。

3.小结

本文主要是介绍了一个MessengerJS方案及其使用方法,来解决父窗体与子窗体的通信问题。同时提供了一个完整的实例,可以实现子窗体向父窗体传递消息,父窗体通过监听消息事件,来获取子窗体消息的目的。如有问题,欢迎指正。

相关阅读 【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识

此文已由作者授权腾讯云+社区发布,更多原文请点击

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

海量技术实践经验,尽在云加社区

© 著作权归作者所有

共有 人打赏支持
腾讯云加社区
粉丝 85
博文 138
码字总数 351589
作品 0
深圳
私信 提问
HTML iframe 用法小总结

Iframe用法,下面是一个常规的列子 <iframe border=2 frameborder=0 width=500 height=500 marginheight=0 marginwidth=0 scrolling=no src="move-ad.html"></iframe> 其中: iframe用于设置文......

Mr韦淋
2014/11/17
0
0
jsp 内嵌网页内容--iframe

ZZzzz~ may wind  src:文件的路径,既可是HTML文件,也可以是文本、ASP等;  width、height:"画中画"区域的宽与高;  scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项...

网页
2008/05/21
0
0
Iframe之间及iframe与父窗体之间值的传递

方法一:ScriptManager.RegisterClientScriptBlock(this,typeof(Page), "NoInformation", "window.parent.frames['Add'].location.reload();", true); 此: 会弹出页面刷新错误 方法二: Sc......

晨曦之光
2012/05/16
1K
0
“画中画”效果--谈IFRAME标签的使用

作者:秋实 文章来源:天极网页陶吧 纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚...

晨曦之光
2012/03/09
82
0
C#从入门到精通之Windows窗体

1.Form窗体 1.1 设置启动窗口:Application.Run(new Form1()); 1.2 窗体的属性 1.更改窗体的图标:在属性面板中设置窗口的Icon属性(在添加窗体图标时图标格式只能是ico) 2.隐藏窗体的标题栏...

tiegenz
03/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开源软件会被云杀死吗 ?

本文转载云头条,原作者:Michael Stiefel是Reliable Software公司的负责人,是一名软件架构和开发顾问。 文章要点 虽然开源开发不会消失,但商业开源厂商的未来不是很有希望。随着全面管理的...

linuxCool
25分钟前
1
0
OSChina 周三乱弹 —— 谈什么对象?睡什么觉?

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @胖达panda :最肯忘却古人诗,最不屑一顾是相思。分享童丽的单曲《红豆生南国》: 《红豆生南国》- 童丽 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
29分钟前
81
5
stylus

stylus基础教程,stylus实例教程,stylus语法总结

miaojiangmin
今天
3
0
PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
今天
2
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部