应用说明：

这个例子演示如何在门户页面以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. SharePoint 2013 中将 HTML文件转换为母版页

    原文:SharePoint 2013 中将 HTML文件转换为母版页 SharePoint 2013提供了很多新功能,下面我们看看将Html页面,转换为母版页的功能.这个功能更加方便设计人员设计母版页 ...

  2. ThreadLocal可能引起的内存泄露(转)

    threadlocal里面使用了一个存在弱引用的map,当释放掉threadlocal的强引用以后,map里面的value却没有被回收.而这块value永远不会被访问到了. 所以存在着内存泄露. 最好 ...

  3. java.lang.IllegalStateException: You need to use a Theme.AppCompat theme

    配置: 中设置theme为 <application android:allowBackup="true" android:icon="@mipmap/ic_lau ...

  4. ENode简介与各种资源汇总

    ENode简介与各种资源汇总 ENode是什么 ENode是一个.NET平台开源的应用开发框架,为开发人员提供了一套完整的基于DDD+CQRS+ES+(in-memory)+EDA架构风格的解决方案. ...

  5. 有一定基础的 C++ 学习者该怎样学习 Windows 编程？

    人的心理有个奇异的特性:一项知识一旦学会之后,学习过程中面临的困惑和不解非常快就会忘得干干净净,似乎一切都是自然而然,本来就该这种.因此,关于「怎样入门」这类问题,找顶尖高手来回答,未必能比一个刚入门 ...

  6. NSOJ 飞船汇合(经典)

    一支分散的飞船舰队,需要汇合到主舰,但是这种飞船在太空中飞行的耗油与质量没有关系,只与发动机打开的时间有关系,为了节省油量,指挥官通知,汇合途中,多台飞船可以串成串飞行,这样只需启动一台发动机,由于安 ...

  7. SSIS从理论到实战,再到应用

    原文:SSIS从理论到实战,再到应用 一,是什么(What?) 1.SSIS是Microsoft SQL Server Integration Services的简称,是生成高性能数据集成解决方案(包 ...

  8. 无废话WCF入门教程四[WCF的配置文件]

    一.概述 配置也是WCF编程中的主要组成部分.在以往的.net应用程序中,我们会把DBConn和一些动态加载类及变量写在配置文件里.但WCF有所不同.他指定向客户端公开的服务,包括服务的地址.服务用于 ...

  9. android之【本地通知Notification】

    public class NotificationTest extends Activity { static final int NOTIFICATION_ID = 0x1123; @Overrid ...

  10. CodeForces 14 E - Camels &amp;&amp; D - Two Paths

    D - Two paths 仅仅想到了一个o(n^2)的解法. 首先枚举删除一条边,必定得到两棵独立的树.计算两棵树的直径.保留最大乘积. 首先两条路不相交,则必定能够分到两棵子树中,由于要乘积最大, ...