`
cakin24
  • 浏览: 1388264 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

跨文档消息传递应用

阅读更多

 

一 应用
source.html程序调用window的open方法打开一个新的窗口,接下来程序即可调用新窗口对应的window对象的postMessage向该文档发送消息。
 
 
二 代码
1、source.html
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 跨文档发送消息 </title>
	<script type="text/javascript">
	var send = function() 
	{
		// 打开一个新窗口
		var targetWin = window.open('http://localhost/test1/1/target/target.html'
			,'_blank','width=400,height=300');    //①
		// 等该窗口装载完成时,向该窗口发送消息
		targetWin.onload = function ()
		{ 
			// 向http://localhost:8888/target发送消息
			targetWin.postMessage(document.getElementById("msg").value
				, "http://localhost/test1/1/target");    //②
		}
	}
	// 通过onmessage监听器监听其他窗口发送回来的消息
	window.onmessage = function(ev) 
	{
		// 忽略来自其他域名的跨文档消息(只接受http://localhost的消息)
		if (ev.origin != "http://localhost") 
		{
			return;
		}
		var show = document.getElementById("show");
		// 显示消息
		show.innerHTML += (ev.origin + "传来了消息:" + ev.data + "<br/>");
	};
	</script>
</head>
<body>
	消息:<input type="text" id="msg" name="msg"/>
	<button onclick="send();">发送消息</button>
	<div id="show"></div>
</body>
</html>
 
2、target.html
<!DO
CTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 跨文档发送消息接收 </title>
	<script type="text/javascript">
		window.onmessage = function(ev) 
		{
			// 忽略来自其他域名的跨文档消息(只接受http://localhost:8888的消息)
			if (ev.origin != "http://localhost") 
			{
				return;
			}
			document.body.innerHTML = (ev.origin + "传来了消息:" + ev.data);
			// 向发送该消息的页面回传消息
			ev.source.postMessage("回传消息,这里是" + this.location
				, ev.origin);    //①
		};
	</script>
</head>
<body>
</body>
</html>
 
三 运行结果


 
  • 大小: 26.5 KB
1
1
分享到:
评论

相关推荐

    Go-nativemessaging用于go应用程序的本地消息传递主机库

    在软件开发中,尤其是在跨平台或多组件系统中,本地消息传递是一种重要的技术,用于在不同进程或应用之间交换数据和指令。下面将详细探讨这个库的功能、工作原理以及如何在实际项目中使用。 1. **功能介绍** - **...

    iframe消息监听传递

    这两个API是HTML5引入的,用于实现跨文档的消息传递,即使这些文档来自不同的源。 1. **`postMessage`方法**:此方法允许一个窗口向其他窗口发送消息。调用格式是`window.postMessage(message, targetOrigin)`,...

    消息总线文档管理

    消息总线文档管理是IT行业中一个重要...总结来说,消息总线文档管理是利用消息中间件技术实现跨系统的信息交换,提高了系统的可扩展性和可靠性。通过理解和熟练运用消息总线,我们可以构建更加高效、灵活的分布式系统。

    多客户端的消息传递工具

    在信息技术领域,多客户端的消息传递工具是一种允许多个用户通过网络进行实时通信的应用程序。这些工具的核心功能是提供文本、语音、视频聊天,以及文件共享等多种通信方式,使分布在不同地点的用户能够便捷地进行...

    JAVA消息传递的具体含义.doc

    通过JMS,客户端可以透明地访问各种符合JMS规范的消息传递系统,实现跨平台和跨产品的兼容性。 6. **消息**:在JMS中,消息是数据的载体,包含了要传递的信息。消息可以包含各种类型的数据,如文本、对象或二进制...

    非常牛b的消息传递,可以不同网段

    文件名称"Messaging"可能是一个包含有关此消息传递系统的文档、代码示例或者配置文件的压缩包。解压后,我们可以深入学习KBMMW的实现细节、配置方法以及如何设置Hub和Spoke来实现跨网段通信。这可能涵盖如XML配置...

    行业分类-设备装置-多媒体消息传递方法和系统.zip

    本压缩包中的“多媒体消息传递方法和系统.pdf”文档详细阐述了这一主题,主要涵盖了以下几个方面的内容: 1. **多媒体消息定义**:多媒体消息(Multimedia Messaging Service,简称MMS)是一种允许用户在移动设备...

    chat:跨iframe消息传递和angularjs带来一些乐趣

    而跨iframe消息传递则是一种允许不同iframe之间通信的技术,这对于在一个页面上整合多个独立的Web组件或应用是非常有用的。 AngularJS的核心特性包括数据绑定、依赖注入、指令系统以及模块化,这些都极大地提高了...

    实验三 消息中间件应用开发:ActiveMQ实现单线程多队列

    首先,我们需要了解ActiveMQ的核心特性,如点对点(Point-to-Point)和发布/订阅(Publish/Subscribe)模型,这两种模式是消息传递的两种基本方式。点对点模式下,每个消息只有一个消费者,而发布/订阅模式下,一个...

    JMS入门文档,JMS入门文档

    Java消息服务(Java Message Service,简称JMS)是Java平台中...对于初学者来说,这些文档会提供一个良好的起点,帮助他们逐步掌握JMS的核心概念和实践技巧,从而在开发中有效地利用消息传递机制进行解耦和异步处理。

    Kahla.App:Kahla是跨平台的业务消息传递应用程序

    Kahla是一个跨平台的业务消息传递应用程序。 在这里尝试: Kahla当前针对Windows,Linux,macOS,Android和iOS。 Kahla是使用Angular 8和打字稿构建的。 是使用.NET Core构建的。 有关Kahla项目和Kahla API的更...

    Android 文档在线或者本地预览应用内打开Office.zip

    对于在线预览,可以利用Web视图(WebView)加载网页,将文档URL作为参数传递给在线文档预览服务(如Google Docs)。用户无需下载文件,只需在网络连接下即可查看。这种方式需要注意安全问题,如防止XSS攻击和跨站...

    SAP跨公司采购配置文档

    SAP作为全球领先的企业应用软件提供商,其跨公司采购功能为企业提供了高效的解决方案。本文将基于"SAP跨公司采购配置文档",深入探讨SAP在跨公司采购方面的最佳业务实践,以及如何通过SAP ECC 5.00系统进行有效的...

    关于HTML5的多篇论文文档

    包括多篇文档: ...HTML5对移动应用的影响 ...一种基于HTML5的安全跨文档消息传递方案 HTML5在移动互联网中的应用 HTML5发展趋势的研究和探索 常用HTML5移动应用框架 基于HTML5的离线存储技术 dz̸HTML5

    AndroidAPI文档完整版

    - Intent用于在组件之间传递消息,可以启动Activity或Service,也可以触发BroadcastReceiver。 6. **布局与视图(Layouts and Views)** - 布局文件定义了UI结构,常用布局有LinearLayout、RelativeLayout、...

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

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

    微信分享(html5兼容所有的移动端浏览器)

    2. **跨文档消息传递**:由于微信内置浏览器的特殊性,我们需要通过window.postMessage API与微信的JSBridge进行通信,以实现如获取用户微信信息、分享到朋友圈等操作。跨文档消息传递允许不同源的脚本之间安全地...

    行业文档-设计装置-基于混合模式跨平台应用的异步请求方法.zip

    本篇行业文档主要探讨的是如何在这样的环境中实现异步请求方法,以提升应用的响应性和用户体验。 异步请求是网络编程中的核心概念,尤其是在处理I/O密集型任务时,如数据的发送和接收。在基于混合模式的跨平台应用...

    PJSIP中文开发文档

    - **社交应用**:实现即时消息传递、语音通话和视频聊天等功能。 - **远程教育平台**:支持在线课程直播、实时互动教学等需求。 - **游戏通讯**:为多人在线游戏提供语音聊天服务,增强玩家间的交流体验。 ### 五、...

    IBM MQ for .net开发文档

    《IBM MQ for .net开发文档》是一份详尽的技术指南,旨在帮助开发者了解如何在Microsoft .NET环境中利用IBM MQ进行消息传递。这份文档由多位IBM技术专家共同编写,包括Saida Davies、Michael Hamann、Sachin ...

Global site tag (gtag.js) - Google Analytics