用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值 - 11GX
首页 > 用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值

用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值

-->

Window postMessage() 方法

定义和用法

postMessage() 方法用于安全地实现跨源通信。

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);
参数说明
otherWindow其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message将要发送到其他 window的数据。
targetOrigin指定哪些窗口能接收到消息事件,其值可以是 *(表示无限制)或者一个 URI。
transfer可选,是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

index.html



父页面


这是父页面




这是被嵌套的页面

iframe.html



被嵌套页面





父页面传信息给子页面 


子页面传信息给父页面 

更多相关:

  • GitHub: https://github.com/WozHuang/mp-extend 主要目标 微信小程序官方没有提供类似vuex、redux全局状态管理的解决方案,但是在一个完整的项目中各组件的数据一致性是必须要保证,因此需要开发一个能够实现小程序全局状态管理的解决方案。 设计思路 参考omix后,我觉得其中实现全局状态管...

  • 定义全局变量的js: a.js 1 function GlobalConfig(){ 2 3 } 4 GlobalConfig.IPSSAddress="http://localhost/index/"; 5 (function(){ 6 7 })(); View Code 页面index.html里需要引用a.js 页面i...

  • 404错误页面是站长和用户都很不愿见到的页面,因为那意味着该网站不能访问。但404错误是没人能避免,如服务器出现问题,站内需要调整,收到攻击等,我们访问网站的时候,一旦遇到404提示,我们那时的感觉是相当差的,我们的用户体验马上就会下降,正因为如此,有一个良好的404页面设计来帮助我们的的访客,提示他们找不到相应的网页是那么的重要,越...

  • 代码精简使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点:一 是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数 量有一定好处。表格的嵌套问题很多网站如何推广的文章中称,搜索引擎一...

  • 首先对微擎的工作原理做简单描述, 微擎使用规则和模块的机制来处理公众平台的请求数据并返回响应的结果.执行流程描述为: 粉丝用户与公众号码进行对话或交互, 而后公众平台将粉丝用户的请求消息(当前包括: 文本, 图片, 位置, 链接, 事件. 请参阅消息类型)传递给微擎系统, 微擎系统按照消息类型和对应的公众号所设定的规则列表匹配到合适的...

  • 消息队列的使用场景以下介绍消息队列在实际应用常用的使用场景。异步处理、应用解耦、流量削锋和消息通讯四个场景。1】异步处理:场景说明:用户注册后,需要发注册邮件和注册短信。引入消息队列后架构如下:用户的响应时间=注册信息写入数据库的时间,例如50毫秒。发注册邮箱、发注册短信写入消息队列后,直接返回客户端,因写入消息队列的速度很快,基...

  • 下面是我凭记忆想到的几个题目,有需要的同学就拿去吧,我也算做了点善事. 中体骏彩C++笔试题 2013-11-18 1.指针的含义是:B A.名字 B.地址 C.名称 D.符号 2.给出下面的程序输出: #include #include #include ...

  • 双端通信描述 利用消息队列针对发送接受消息的类型唯一性 进行多个客户端之间消息传递,而不需要server端进行消息转发。 同时消息队列的读阻塞和写阻塞特性(消息队列中已经写入数据,如果再不读出来,则无法再次写入)让消息队列的实现过程只能如下: 客户端1的父进程用来处理类型1的消息写,子进程处理类型2的消息读客户端2的父进程处理类型...

  • 文章目录基本介绍编程接口代码实例消息队列的发送和接收消息队列中的消息对象的属性控制 基本介绍 支持不同进程之间以消息(messages)的形式进行数据交换,消息能够拥有自己的标识,且内核使用链表方式进行消息管理。进程之间的通信角色为:发送者和接受者 发送者: a. 获取消息队列的ID(key或者msgid) b. 将数据放入...