应用说明：

这个例子演示如何在门户页面以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. POJ 2431 Expedition (贪心+优先队列)

    题目地址:POJ 2431 将路过的加油站的加油量放到一个优先队列里,每次当油量不够时,就一直加队列里油量最大的直到能够到达下一站为止. 代码例如以下: #include <iostream&g ...

  2. android 电平信号状态识别View平局

    1.前言 级信号状态View在今天的Android系统是常见.状态的图标就很的经典,有几种状态,到了快没电的时候有些还会闪烁提示用户充电:还有的就是一些地图App的GPS信号强度的提示.Wifi信号强 ...

  3. Android：创建耐磨应用 - 定义自己的布局

    创建自己的自定义布局(Creating Custom Layouts) 本文介绍如何创建自己的自定义通知和使用可穿戴UI库来创建自己的自定义布局同时你还需要知道耐磨设计标准(Wear Design P ...

  4. UnitOfWork应用

    UnitOfWork以及其在ABP中的应用 Unit Of Work(UoW)模式在企业应用架构中被广泛使用,它能够将Domain Model中对象状态的变化收集起来,并在适当的时候在同一数据库连接和 ...

  5. 如何定义AIDL跨进程间通信

    当进程A要去调用进程B中的service时,并实现通信,我们通常都是通过AIDL来操作的 projectA: 首先在我们自己的包com.wzp.aidlservice中创建一个RemoteServic ...

  6. JavaScript面向对象旅程（下）

    JavaScript面向对象旅程 剪不断,理还乱,是离愁. 前面已经提到过新语言开发的两个步骤,分别是:一.定义基本的数据类型,完善结构化编程语言的设计:二.为函数类型绑定this的概念,好在对象的方 ...

  7. STL 源代码分析 算法 stl_algo.h -- pre_permutation

    本文senlie原版的,转载请保留此地址:http://blog.csdn.net/zhengsenlie pre_permutation ------------------------------ ...

  8. SettingsProvider 它SettingsCache

    转载请注明出处:http://blog.csdn.net/droyon/article/details/35558437 SettingsCache,如指出,SettingsProvider缓冲.这将 ...

  9. DevExpress Report 其他常用设计技巧

    原文:DevExpress Report 其他常用设计技巧 1 设置默认的打印纸张及页边距 选择Report-打开属性窗口,设置默认边距(Margins)和默认纸张(PaperKind). 2 修改R ...

  10. blog_导航

    blog导航 在左下侧:随笔分类   简要做个导航图放到这儿方便大家查阅 直奔爬虫:   点击->      直奔oracle:点击->