html postMessage 创建聊天应用

时间：2015-10-12 12:18:26 阅读：253 评论：0 收藏：0 [点我收藏+]

应用说明：

这个例子演示如何在门户页面以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 创建聊天应用

原文：http://www.cnblogs.com/shizhouyu/p/4871096.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)