`
deng131
  • 浏览: 673681 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

postMessage实现跨文档消息传输

阅读更多
在HTML5中新增了postMessage方法,postMessage可以实现跨文档消息传输(Cross Document Messaging),Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。

/*
 * In window A's scripts, with A being on <http://example.com:8080>:
 */
var popup = window.open(...popup details...);
// When the popup has fully loaded, if not blocked by a popup blocker:
// This does nothing, assuming the window hasn't changed its location.
popup.postMessage("The user is 'bob' and the password is 'secret'",
"https://secure.example.net");
// This will successfully queue a message to be sent to the popup, assuming
// the window hasn't changed its location.
function receiveMessage(event)
{
  // Do we trust the sender of this message?  (might be
  // different from what we originally opened, for example).
  if (event.origin !== "http://example.org") return;
  // event.source is popup
  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);

可以通过绑定window的message事件来监听发送跨文档消息传输内容

[color=red]setTimeout经常被用来做网页上的定时器,允许为它指定一个毫秒数作为间隔执行的时间。当被启动的程序需要在非常短的时间内运行,我们就会给她指定一个很小的时间数,或者需要马上执行的话,我们甚至把这个毫秒数设置为0,但事实上,setTimeout有一个最小执行时间,当指定的时间小于该时间时,浏览器会用最小允许的时间作为setTimeout的时间间隔,也就是说即使我们把setTimeout的毫秒数设置为0,被调用的程序也没有马上启动。
postMessage实现无延迟的setTimeout基本思路是:将要调用的函数加入数组中,并马上向自己所在的窗口发一个消息,对窗口添加了接收消息事件,所以窗口马上就收到了该消息,接着就将之前数组中保存的函数弹出并执行。也就是绑定window窗体message事件去侦听这个事件。
// BEGIN implementation of setZeroTimeout
// Only add setZeroTimeout to the window object, and hide everything
// else in a closure.
(function() {
	var timeouts = [];
	var messageName = "zero-timeout-message";
	// Like setTimeout, but only takes a function argument.  There's
	// no time argument (always zero) and no arguments (you have to
	// use a closure).
	function setZeroTimeout(fn) {
		timeouts.push(fn);
		window.postMessage(messageName, "*");
	}
	function handleMessage(event) {
		if (event.source == window && event.data == messageName) {
			event.stopPropagation();
			if (timeouts.length> 0) {
				var fn = timeouts.shift();
				fn();
			}
		}
	}
	window.addEventListener("message", handleMessage, true);
	// Add the one thing we want added to the window object.
	window.setZeroTimeout = setZeroTimeout;
})();


外部调用方法来触发事件,此时触发内部message事件绑定handleMessage方法。
window.setZeroTimeout(function(){})


参考:
https://developer.mozilla.org/en/DOM/window.postMessage
http://blog.tugai.net/2010/03/27/postmessage-settimeout/
分享到:
评论

相关推荐

    html5 API postMessage 实现消息跨域推送

    在这个场景下,`postMessage`成为了实现消息跨域推送的关键技术。 `postMessage`的核心在于两个主要的概念:发送者和接收者。发送者是执行`postMessage`方法的窗口、iframe或者Worker对象,它负责创建并发送消息。...

    进程间用postMessage发消息 ,在实际开发中的实例,

    1. `postMessage`:这是HTML5引入的一个特性,用于实现跨文档消息传递。通过`window.postMessage`方法,一个窗口可以向任何其他窗口发送消息,无论它们是否属于同一个源。接收端需要监听`message`事件来接收到的消息...

    PostMessage or SentMessage 的消息创建

    本文档将详细介绍如何在两个C++类之间通过自定义消息来实现数据的传递,主要涉及`PostMessage`和`SendMessage`函数的使用。 首先,我们需要创建自定义的消息。在MFC中,这通常通过类向导完成。打开DLG(Dialog)类...

    html5 跨文档消息传输示例探讨

    然而,随着Web应用复杂性的增加,有时我们需要在多个窗口或者iframe之间传递数据,这时跨文档消息传输就显得尤为重要。 首先,我们要了解如何监听窗口对象的`message`事件。`message`事件会在一个窗口接收到其他...

    PostMessage系统漏洞及应对方案.pptx

    `PostMessage`是HTML5引入的一种跨文档通信机制。它通过`window.postMessage()`方法,可以在不同源的窗口之间发送消息。消息传递包含三个主要参数:`message`(要发送的数据)、`targetOrigin`(接收数据的源,通常...

    postmessage-file-transfer-example:使用帖子消息将本地文件传输到另一个框架的示例

    本示例主要展示了如何利用`postmessage`来实现本地文件从一个框架向另一个框架的传输,这在处理用户数据交换、多窗口协作或在不同域之间共享信息时非常有用。 `postMessage` 是HTML5引入的一个特性,允许不同源的...

    详解HTML5 window.postMessage与跨域

    HTML5中的window.postMessage是一个非常重要的API,它允许跨源通信,即在不同域之间进行安全的数据交换。同源策略是浏览器的一种安全机制,限制了不同源之间的交互。postMessage的出现,突破了这一限制,允许页面在...

    HTML5中使用postMessage实现Ajax跨域请求的方法

    这个方法提供了一种安全的进行跨源通信的方式,允许Window对象之间使用postMessage方法发送消息。 使用postMessage方法实现跨域请求,必须满足以下条件: 1. postMessage兼容性较好,支持IE8+以及主流的现代浏览器...

    两个程序间消息的传递

    这里我们探讨的主题是如何在两个程序之间实现消息的发送与接收,主要关注MFC(Microsoft Foundation Classes)框架下的C++实现。MFC是微软提供的一个C++类库,它简化了Windows应用程序开发,包括窗口、控件、消息...

    HTML5程序设计-3期(KC014) KC014050000009 单元设计_单元9 HTML5 通信和多线程..doc

    这通常涉及使用`postMessage`和`message`事件来实现实时通信。教师会通过讲解和实例演示,让学生掌握跨文档消息传输的原理和实际操作。 其次,WebSocket是一种提供全双工通信的协议,允许客户端和服务器之间进行...

    网页消息通信 Message communication for web

    2. **跨文档消息传递 (Cross-document messaging)** `postMessage()`方法使得一个页面可以向其他窗口发送消息,无论它们是否属于同一个源。接收端窗口通过`window.addEventListener('message', eventHandler)`监听...

    C# 钉钉消息推送 调用钉钉SDK实现

    本篇文章将深入探讨如何利用C#调用钉钉SDK来实现消息推送。 首先,我们需要理解钉钉SDK的基本概念。SDK(Software Development Kit)是一组工具、库和文档,旨在帮助开发者更轻松地与特定平台或服务交互。钉钉SDK为...

    信息安全_对方不想说话并扔了个message.pptx

    它的基本使用方式是调用`otherWindow.postMessage(message, targetOrigin, [transfer])`,其中`otherWindow`是接收消息的窗口对象,`message`是要发送的数据,`targetOrigin`指定了接收数据的源,而`[transfer]`用于...

    对方不想说话并扔了个 message.pdf

    5. window.postMessage:这是一个较新的跨文档通信API,允许安全地跨域传输数据。它提供了一种方式,让不同源的脚本能够互相通信。postMessage方法的语法包括了otherWindow(发送目标窗口的引用)、message(要发送...

    API 接口 设计文档 模板

    - **JSON示例**:这部分文档没有提供具体的JSON示例,但在实际应用中,应该包含用户登录成功或失败的状态码、消息提示以及可能的数据返回(如用户的token)。 - **返回字段说明**:这部分文档未提供详细的字段说明...

    接口文档示例,java后端与前端交互文档

    ### 接口文档示例详解 #### 一、概述 接口文档是软件开发过程中不可或缺的一部分,它详细描述了系统之间如何进行数据交换的过程。本文档将详细介绍一个Java后端与前端交互的例子,包括请求和响应的具体格式、所需...

    SMS WebService接口文档

    SMS(Short Message Service)即短消息服务,是手机通信中广泛使用的功能,而WebService是一种基于互联网的、能够进行跨平台交互的服务。本文档将详细介绍如何利用WebService接口与短信平台进行集成,以便开发人员...

    js 实现iframe 之间传值

    为了解决这个问题,我们可以利用`window.postMessage()`方法,它允许跨域通信。 2. `window.postMessage()`方法: 这是HTML5引入的一种安全的跨窗口通信方式。`window.postMessage()`接收两个参数:要传递的数据和...

    窗口 之间 的 通信

    2. `window.postMessage`: 这是一个安全的跨文档消息传递机制,允许来自不同源的脚本采用异步方式进行有限的通信。发送端通过`postMessage`方法发送消息,接收端通过`message`事件监听并处理消息。 3. 事件处理:...

Global site tag (gtag.js) - Google Analytics