应用说明：

这个例子演示如何在门户页面以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. 使用eclips发展java当闪回的问题

    近期開始android的开发学习.当然要先从java入手了.我选择eclips作为开发的IDE,在測试java代码例子时,假设我的代码是能够出现系统自己主动代码补齐时eclips就会立马闪退. 刚開始 ...

  2. Gallatin（大陆版）Office365中Exchange Online混合部署功能已经能够使用了

    经过測试,Exchange混合部署已经能够使用了 前置条件: 本机至少须要一台Exchange Server 2013作为混合部署server 须要一个公网域名 domian.com,能够和内部域名不 ...

  3. 我异常-VS2012“System.AccessViolationException: 试图读取或写入保护内存。”

       我的系统是win7 64位 系统 安装的是 Visual studio 2012.从SVN上下载了源代码.一个B/S的系统.能正常载入登陆页,但在输入登录信息要登录的时候,就报错了:     - ...

  4. ListView单选的实现总结（转）

    今天在智能停车场项目中需要实现PullToRefreshListView的单选功能,考虑到分页,刷新等,以前的实现方式是采用自己维护一个集合保存选中位置的选中状态,但这个方式比较繁琐,今天采用了lis ...

  5. 【Linux】CentOS系统

    版本号:CentOS release 5.7 1)查看系统版本号 cat  /etc/readhat-release 2)安装软件 wget  资源链接 make make install 在线安装: ...

  6. org.springframework.dao.InvalidDataAccessApiUsageException: detached entity passed to persist: sys.entity.Role; nested exception is org.hibernate.PersistentObjectException: 的解决方案

    1.错误信息 org.springframework.dao.InvalidDataAccessApiUsageException: detached entity passed to persist ...

  7. Scala课程01

    Scala课程01 简介 由于本人刚毕业,也是从事软件开发相关的工作.想再学习一下关于大数据.移动互联网.云计算相关的技术.为我的未来打好基础.并且从零开始学习大数据相关的知识,脚踏实地的走好每一步, ...

  8. NSOJ 畅通工程(并查集)

    某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府“畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只要互相间接通过道路可达即可). ...

  9. ABP依赖注入

    ABP依赖注入 点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之6.ABP依赖注入 ABP是“ASP.NET Boilerplate Project (ASP.N ...

  10. JS脚本显示当前日期+星期几[转]

    以下的代码提供了显示当前日期和星期几的实现方法: function writeDateInfo() {         var day="";         var month= ...