应用说明：

这个例子演示如何在门户页面以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. WebKit介绍及总结（一）

    一 . WebKit 简单介绍 Webkit 是一个开放源码的浏览器引擎 (web browser engine) ,最初的代码来自 KDE 的 KHTML 和 KJS( 均开放源码 ) .苹果公司在 ...

  2. 它们的定义UIAlertView

    code4App有很多伟大的上方UI特效代码,,好牛逼啊,这效果,太炫了,哇,怎么自己写不出来.事实上,再炫的特效,都是依据苹果系统的框架而来,假设我们了解系统框架实现的原理,也就能写出属于自己自己定 ...

  3. 阿里云ECSserver部署django

    highlight=uwsgi%20django">參考 server安装的是Centos 系统. uwsgi是使用pip安装的. nginx是使用yum install nginx安 ...

  4. Codeforces Round #257 (Div. 2/A)/Codeforces450A_Jzzhu and Children

    解题报告 没什么好说的,大于m的往后面放,,,re了一次,,, #include <iostream> #include <cstdio> #include <cstri ...

  5. AIX采用LV创ASM磁盘组

    CREATE ASM ON AIX LV DEVICE OS:AIX  6100-03 ASM版本号 10205 # lspv hdisk0          000d295a6d68902b     ...

  6. do{}while(0)宏的作用的定义

    看到开放源代码,宏定义经常这样用 #define some() do { do_somt_thing(); } while (0) 为什么这样用? 能够试一下.假如一个普通宏定义 #define so ...

  7. Ubuntu中编译链接Opencv应用的简便方式

    安装完毕Opencv后,使用下面命令查 看编译/连接參数 pkg-config --cflags --libs opencv 可看到例如以下信息 -I/usr/include/opencv  /usr ...

  8. 【从翻译mos文章】oracle linux 和外部存储系统 关系

    oracle  linux 和外部存储系统 关系 参考原始: Oracle Linux and External Storage Systems (Doc ID 753050.1) 范围: Linux ...

  9. 完整详细的说明GCD列（一）dispatch_async;dispatch_sync;dispatch_async_f;dispatch_sync_f

    为什么要写这个系列,由于百度了一下.我们正在寻找一个非常比较片面的Blog.抄来抄去,写作是很粗糙. 所以,我想写这个系列,尝试记录官方网站GCD强大的全功能的表达.为了方便他们,也方便他人,假设有发 ...

  10. Eclipse的安装及汉化图解

    Eclipse的安装及汉化图解 Eclipse的安装 有了JDK,你可以编译Java源码,运行Java程序,但是还没有代码编辑器,没有版本管理工具,也不能方便的管理工程文件,不能与团队协作.安装Ecl ...