应用说明:

这个例子演示如何在门户页面以iframe方式嵌入第三方插件,示例中使用了一个来域名下的应用部件,门户页面通过postMessage来通信。iframe中的聊天部件通过父页面标题内容的闪烁来通知用户。不过,由于部件不在父页面中,而是被隔离在一个来之不同源的页面中,所以部件使用postMessage来修改父页面标题!

1、创建门户页面

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>postMess</title>
<style>
iframe{
width:400px;
height:300px;
}
</style>
<script>
var defaultTitle = 'Portal[http://localhost]';
var sourse = 'http://localhost';
var notificationTimer = null;
function messageHander(e){
if(e.origin == sourse){
notify(e.data);
}else{
//
}
}
function sendString(s){
document.getElementById('wid').contentWindow.postMessage(s,sourse);
}
function notify(message){
stopBinking();
blinkTitle(message,defaultTitle);
}
function stopBinking(){
if(notificationTimer !== null){
clearTimeout(notificationTimer);
}
document.title = defaultTitle;
}
function blinkTitle(m1,m2){
document.title = m1;
notificationTimer = setTimeout(blinkTitle,1000,m2,m1);
}
function sendStatus(){
var statusText = document.getElementById('statusText').value;
sendString(statusText);
}
function loadDemo(){
document.getElementById('sendButton').addEventListener('click',sendStatus,true);
document.getElementById('stopButton').addEventListener('click',stopBinking,true);
sendStatus();
}
window.addEventListener('load',loadDemo,true);
window.addEventListener('message',messageHander,true);
</script>
</head>
<body> Status<input type="text" id="statusText" value="online"/>
<button id="sendButton">change status</button>
<p>
<button id="stopButton">stop Binking title</button>
</p>
<iframe id="wid" src="get.html"><iframe>
</body>
</html>

2、创建聊天部件页面

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>postMess</title>
<script type="text/javascript">
var sourse = 'http://localhost';
function messageHander(e){
if(e.origin === sourse){
document.getElementById('status').textContent = e.data;
}else{
//
}
}
function sendString(s){
window.top.postMessage(s,sourse);
}
function loadDemo(){
document.getElementById('actionButton').addEventListener('click',function(){
var messText = document.getElementById('messText').value;
sendString(messText);
},true);
}
window.addEventListener('load',loadDemo,true);
window.addEventListener('message',messageHander,true);
</script>
</head>
<body>
status set to:<strong id="status" /></strong>
<div>
<input type="text" id="messText" value="wid nodd" />
<button id="actionButton">send nodd</button>
</div>
</body>
</html>

html postMessage 创建聊天应用的更多相关文章

  1. 使用 Java 创建聊天客户端-1

    1.聊天客户端文本框的搭建. 项目截图:java project 代码: (1).ChatManager.java package com.nantian.javachatclient.main; i ...

  2. 使用signalR创建聊天室。

    浏览器支持Html5的情况下,SignalR使用WebSockets,当不支持时SignalR将使用其它技术来实现通讯. 界面如下:左侧包含三种聊天对象,不同的聊天对象会创建不同的对话框. 设计思路参 ...

  3. 使用 Java 创建聊天客户端-2

    1.项目截图 java聊天核心代码: MyJavaChatClient ================================================================ ...

  4. Workerman创建聊天室实例

    // 标记是全局启动 define('GLOBAL_START', 1); require_once __DIR__ . '/Workerman/Connection.php'; require_on ...

  5. 一步一步创建聊天程序2-利用epoll来创建简单的聊天室

    如图,这个是看视频时,最后的作业,除了客户端未使用select实现外,其它的要求都有简单实现. 服务端代码如下: #include <stdio.h> #include <strin ...

  6. 跟我一起使用socket.io创建聊天应用

    安装express插件 新建index.js var app = require('express')(); var http = require('http').Server(app); app.g ...

  7. 使用SignalR+Asp.net创建实时聊天应用程序

    一.概述: 使用 ASP.NET 那么 SignalR 2 创建一个实时聊天应用程序.将 SignalR 添加 MVC 5 应用程序中,并创建聊天视图发送并显示消息. 在Demo中,将学习Signal ...

  8. 使用Recast.AI创建具有人工智能的聊天机器人

    很多SAP顾问朋友们对于人工智能/机器学习这个话题非常感兴趣,也在不断思考如何将这种新技术和SAP传统产品相结合.Jerry之前的微信公众号文章C4C和微信集成系列教程曾经介绍了Partner如何利用 ...

  9. 用SignalR 2.0开发客服系统[系列2:实现聊天室]

    前言 交流群:195866844 上周发表了 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 这篇文章,得到了很多帮助和鼓励,小弟在此真心的感谢大家的支持.. 这周继续系列2,实现聊天室 ...

随机推荐

  1. jQuery select操作控制方法小结

    需要注意的是,这里的代码好多是针对jquery 1.32以前的版本(以后的版本已经不支持@),所以替换为空测试下即可. jQuery获取Select选择的Text和Value: 语法解释: 1. $( ...

  2. Fatjar成功安装记录

    1.FatJar安装方式 (1)在线安装 具体网址http://kurucz-grafika.de/fatjar (2)离线安装 将fatjar的jar放到plugins文件夹中,重启 2. 安装失败 ...

  3. Ext.net.DirectMethods

    http://www.ext.net.cn/forum.php?mod=viewthread&tid=1282&highlight=directmethod DirectMethod ...

  4. Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

    Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作 1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1. ...

  5. Ubuntu使用之Svn命令小技巧

    注: [svn Path]:是指要代替码分支的server绝对路径 [Path]:是指终端相对当前文件夹的相对路径.假设是在当前文件夹下,就省略路径 ①.取svnserver的代码: svn co [ ...

  6. [Spark性能调优] 第一章:性能调优的本质、Spark资源使用原理和调优要点分析

    本課主題 大数据性能调优的本质 Spark 性能调优要点分析 Spark 资源使用原理流程 Spark 资源调优最佳实战 Spark 更高性能的算子 引言 我们谈大数据性能调优,到底在谈什么,它的本质 ...

  7. python matplotlib 绘图基础

    在利用Python做数据分析时,探索数据以及结果展现上图表的应用是不可或缺的. 在Python中通常情况下都是用matplotlib模块进行图表制作. 先理下,matplotlib的结构原理: mat ...

  8. OOAD与UML

    UML基础介绍 1.UML的定义 统一建模语言(UML)是一种图形化的语言,它可以帮助我们在OOAD过程中标识元素.构建模块.分析过程并可通过文档说明系统中的重要细节 2.OOAD OOAD是根据OO ...

  9. BIO,NIO与AIO的区别

    Java NIO : 同步非阻塞,服务器实现模式为一个请求一个线程,即客户端发送的连接请求都会注册到多路复用器上,多路复用器轮询到连接有I/O请求时才启动一个线程进行处理.Java AIO(NIO.2 ...

  10. Linux基础命令---lprm删除打印任务

    lprm lprm指令用来删除当前打印队列上的任务,如果没有指定,那么就删除当前打印任务.您可以指定一个或多个职务ID编号来取消这些职务,或者使用选项”-”取消所有作业. 此命令的适用范围:RedHa ...