`
cakin24
  • 浏览: 1334181 次
  • 性别: 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
分享到:
评论

相关推荐

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

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

    关于HTML5的多篇论文文档

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

    Applozic-Web-Plugin:Javascript(jQuery)实时聊天和消息传递插件

    一对一和群聊影像撷取照片分享文件附件位置分享推送通知应用内通知在线存在最后看于未读邮件数打字指示邮件已发送,交货报告离线讯息多设备同步应用于用户消息传递自定义聊天气泡UI自定义工具包跨平台支持(iOS,...

    RabbitMQ-Server安装包

    RabbitMQ是一个开源的消息代理(message broker)软件,用于支持应用程序之间的消息传递。它实现了AMQP(Advanced Message Queuing Protocol)协议,并提供了可靠的消息传输、灵活的消息路由、消息队列、发布/订阅等...

    Applozic-Chat-SDK-Documentation:[已弃用]适用于移动和Web应用程序的Applozic聊天和消息传递SDK。 请检查https

    Applozic支持跨任何设备,任何平台和世界上任何地方的实时消息传递。 集成我们的简单SDK,以使您的用户参与图像,文件,位置共享和音频/视频对话。 在上注册以获取您的应用程序密钥。 ANDROID SDK 概述 Android...

    toptal-flutter-chat:这是Toptal工程博客文章的源代码参考,该文章涉及使用Flutter和Firebase开发跨平台即时消息传递应用程序

    顶扑聊天使用Flutter&Firebase开发的跨平台演示聊天客户端,适用于Toptal Engineering Blog文章。搭建环境该项目旨在与flutter channel stable一起工作。 无法保证它将在不同的抖动通道上工作。API密钥注意-如果您...

    人力资源设计文档

    此外,集团化应用、泛组织、多视图智能表单、Portal空间、跨平台多数据库、高 性能多并发、移动应用、短信应用、国际化多语言、多软件功能整合等都是NC协 同-OA套件软件的新特征。 随着我们对协同管理的不断深入研究...

    sunshine-conversations-web:Smooch Web SDK将向您的网站或Web应用程序添加实时Web消息传递

    通过无缝地到任何消息传递应用程序,让您的客户按照您想要的方式与您。 在每台设备上同步对话,并在客户使用的渠道上进行同步。 与感觉和外观适合您的网站的消息传递建立更好的关系。 使用,以最引人入胜的对话体验...

    jBus:一个 javascript 跨扩展消息架构

    另一方面,jBus 是一种跨扩展消息传递架构,设计时考虑到了防止命名冲突,它具有简单但富有表现力的 API,并且可以实现任意两段 JavaScript 代码之间的松耦合共享,就像一个 DOM 。文档和兼容性jBus 与任何支持...

    js高级程序设计第三版

    深入浅出地探讨了面向对象编程、Ajax 与Comet 服务器端通信,HTML5 表单、媒体、Canvas(包括WebGL)及Web Workers、地理定位、跨文档传递消息、客户端存储(包括IndexedDB)等新API,还介绍了离线应用和与维护、...

    HTML5精粹:利用HTML5开发令人惊奇的Web站点和革命性应用 pdf扫描版

    第13章介绍了HTML5中的Ajax、跨文档消息传递、Web套接字等通信技术的原理,以及它们的API;第14章讲解了HTML5中Web Workers的使用方法和实现原理,以及它的API;第15章和第16章介绍了HTML5中的历史接口和脱机功能,...

    精通MFC (光盘) 源代码

    7.10 跨进程处理消息 7.11 消息钩子 7.11.1 钩子和过滤器 7.11.2 钩子的类型和范围 7.11.3 安装和解除消息钩子 7.11.4 使用线程范围和钩子实例 7.11.5 使用全局钩子实例 7.12 小结 第8章 对话框 8.1 ...

    JavaScript开发王

    全书从JavaScript语言实现的各个组成部分——语言核心、DOM、BOM、事件模型讲起,深入浅出地探讨了面向地理定位、跨文档传递消息、客户端存储(包括IndexedDB)等新API,还介绍了离线应用和与维护、性能、部署相关的...

    超级有影响力霸气的Java面试题大全文档

    超级有影响力的Java面试题大全文档 1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节。...

    js高级程序设计第三版(高清中文含源码压缩)

    深入浅出地探讨了面向 对象编程、Ajax 与 Comet 服务器端通信,HTML5 表单、媒体、Canvas(包括 WebGL)及 Web Workers、 地理定位、跨文档传递消息、客户端存储(包括 IndexedDB)等新 API,还介绍了离线应用和与...

    Javascrpt高级程序设计

    地理定位、 跨文档传递消息、 客户端存储(包括 IndexedDB) 等新 API, 还介绍了离线应用和与维护、 性 能、 部署相关的最佳开发实践。 本书附录展望了未来的 API 和 ECMAScript Harmony 规范。 本书适合有一定编程...

    Javascrpt 高级程序设计(第3版)中文文字版

    深入浅出地探讨了面向对象编程、Ajax 与Comet 服务器端通信,HTML5 表单、媒体、Canvas(包括WebGL)及Web Workers、地理定位、跨文档传递消息、客户端存储(包括IndexedDB)等新API,还介绍了离线应用和与维护、...

    Javascrpt 高级程序设计(第3版)英文

    深入浅出地探讨了面向对象编程、Ajax 与Comet 服务器端通信,HTML5 表单、媒体、Canvas(包括WebGL)及Web Workers、地理定位、跨文档传递消息、客户端存储(包括IndexedDB)等新API,还介绍了离线应用和与维护、性 ...

    js高级程序设计非扫描

    地理定位、跨文档传递消息、客户端存储(包括 IndexedDB)等新 API,还介绍了离线应用和与维护、性 能、部署相关的最佳开发实践。本书附录展望了未来的 API 和 ECMAScript Harmony 规范。 本书适合有一定编程经验的 ...

    JavaScript 高级程序设计非扫描版

    深入浅出地探讨了面向 对象编程、Ajax 与 Comet 服务器端通信,HTML5 表单、媒体、Canvas(包括 WebGL)及 Web Workers、 地理定位、跨文档传递消息、客户端存储(包括 IndexedDB)等新 API,还介绍了离线应用和与维护、...

Global site tag (gtag.js) - Google Analytics