1. 首页
  2. HTML
  3. html postMessage 创建聊天应用

html postMessage 创建聊天应用

•html•阅读 4160

应用说明：

这个例子演示如何在门户页面以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"  value="online"/>
    <button >change status</button>
    <p>
        <button >stop Binking title</button>
    </p>
    <iframe  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   /></strong>
    <div>
        <input type="text"   value="wid nodd" />
        <button >send nodd</button>
    </div>
</body>
</html>

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。