应用说明：

这个例子演示如何在门户页面以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. MYSQL C API 记录

    一.环境与条件 MySQL AB 提供了C API,能够提供低等级界面,负责完毕涉及SQLserver交互的大多数常规任务:数据库连接 .查询.结果集处理和错误处置.C API通过两个组件实现: 头文 ...

  2. hdu1023

    import java.math.BigInteger; import java.util.Scanner; public class Main { static BigInteger fac(Big ...

  3. 怎么理解Condition(转)

    在java.util.concurrent包中,有两个很特殊的工具类,Condition和ReentrantLock,使用过的人都知道,ReentrantLock(重入锁)是jdk的concurren ...

  4. Eclipse 发布到网站的附加产品的形式 Update Site

    Eclipse 发布到网站的附加产品的形式 Update Site 通过Update Site Project项目将自己做的插件产品公布到公网上,给客户或其它測试人员下载和应用,这样自己的插件就以网站 ...

  5. JavaEE(7) - JMS消息事务和异常

    1. 使用事务性Session为消息增加事务(NetBeans创建java project: TxSession) MessageSender.java package lee; import jav ...

  6. JavaScript通告/订阅的例子

    原文链接: Pub/Sub JavaScript Object原始日期: 2014年6一个月11日本: 2014年6月13日 翻译人员: 铁锚 高效AJAX站点的三大杀器: 事件代理, 浏览历史管理, ...

  7. SQL Server 备份和还原全攻略

    原文:SQL Server 备份和还原全攻略 一.知识点 完全备份: 备份全部选中的文件夹,并不依赖文件的存档属性来确定备份那些文件.(在备份过程中,任何现有的标记都被清除,每个文件都被标记为已备份, ...

  8. 【C++模版之旅】项目中一次活用C++模板(traits)的经历

    曾经曾在一个项目中碰到过一个挺简单的问题,但一时又不能用普通常规的方法去非常好的解决,最后通过C++模板的活用,通过traits相对照较巧妙的攻克了这个问题.本文主要想重现问题发生,若干解决方式的比較 ...

  9. [Shell]输入參数

    获取shell脚本的输入參数,而且推断得到的參数. #!/bin/bash #title: testPT.sh #atuhor: orangleliu #date: 2014-08-08 #desc: ...

  10. Instruments-Automation: 通过命令行执行测试用例

    为了实现该脚本的自己主动定时执行.我们需要开始在命令行和脚本,详细代码如下所示的: instruments -t /Applications/Xcode.app/Contents/Applicatio ...