html5 postMessage

现在的位置: 首页 > 综合 > 正文

2013年12月06日 ⁄ 综合 ⁄ 共 5995字 ⁄ 字号小中大 ⁄ 评论关闭

1、启动服务

pateo@pateo-B86N53X:~$ python -m SimpleHTTPServer 9999
Serving HTTP on 0.0.0.0 port 9999 ...

2、部署应用

pateo@pateo-B86N53X:/var/www$ ls

postMessagePortal.html

3、修改host

/etc/hosts下面增加两行

127.0.0.1       chat.example.net 
127.0.0.1       portal.example.com

4、当前用户目录下

pateo@pateo-B86N53X:/etc$ cd ~/
pateo@pateo-B86N53X:~$ ls

postMessageWidget.html styles.css postMessagePortal.html

5、打开浏览器，输入：http://portal.example.com:9999/postMessagePortal.html

postMessagePortal.html

<!DOCTYPE html>
<title>Portal [http://portal.example.com:9999]</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="http://apress.com/favicon.ico">
<script>

var trustedOrigin = "http://chat.example.net:9999";

var defaultTitle = "Portal [http://portal.example.com:9999]";
var notificationTimer = null;

function messageHandler(e) {
    if (e.origin == trustedOrigin) {
        notify(e.data);
    } else {
        // ignore messages from other origins
    }
}

function sendString(s) {
    document.getElementById("widget").contentWindow.postMessage(s, trustedOrigin);
}


function notify(message) {
    stopBlinking();
    blinkTitle(message, defaultTitle);
}

function stopBlinking() {
    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", stopBlinking, true);
    sendStatus();
}
window.addEventListener("load", loadDemo, true);
window.addEventListener("message", messageHandler, true);

</script>

<h1>Cross-Origin Portal</h1>
<p><b>Origin</b>: http://portal.example.com:9999</p>
Status <input type="text" id="statusText" value="Online">
<button id="sendButton">Change Status</button>
<p>
This uses postMessage to send a status update to the widget iframe contained in the portal page.
</p>
<iframe id="widget" src="http://chat.example.net:9999/postMessageWidget.html"></iframe>
<p>
    <button id="stopButton">Stop Blinking Title</button>
</p>

postMessageWidget.html

<!DOCTYPE html>
<title>widget</title>
<link rel="stylesheet" href="styles.css">
<script>

var trustedOrigin = "http://portal.example.com:9999";

// TODO whitelist array

function messageHandler(e) {
    if (e.origin === "http://portal.example.com:9999") {
        document.getElementById("status").textContent = e.data;
    } else {
        // ignore messages from other origins
    }
}

function sendString(s) {
    window.top.postMessage(s, trustedOrigin);
}

function loadDemo() {
    document.getElementById("actionButton").addEventListener("click",
        function() {
            var messageText = document.getElementById("messageText").value;
            sendString(messageText);
        }, true);

}
window.addEventListener("load", loadDemo, true);
window.addEventListener("message", messageHandler, true);

</script>
<h1>Widget iframe</h1>
<p><b>Origin</b>: http://chat.example.net:9999</p>
<p>Status set to: <strong id="status"></strong> by containing portal.<p>

<div>
    <input type="text" id="messageText" value="Widget notification.">
    <button id="actionButton">Send Notification</button>
</div>

<p>
This will ask the portal to notify the user. The portal does this by flashing the title. If the message comes from an origin other than http://chat.example.net:9999, the portal page will ignore it.
</p>

styles.css

/**
 * Copyright (c) 2007-2010, Kaazing Corporation. All rights reserved.
 */

/* Author: Peter Lubbers */

body {
	font-family: Arial Narrow, Helvetica, Arial, sans-serif;
	color:#000000;
	}
	
p {
  /* setup some more readable paragraph spacing */
  margin-top: 0px;
  margin-bottom: 10px;
}

p.code {
	font-family:"Courier New", Courier, monospace;
	color:#FFFFFF;
	background-color:#44687d;
	margin: 0px 20px 10px 10px;
	padding: 10px 10px; 
	}

.code_inline {
	font-family: "Courier New", Courier, monospace;
	color: #44687d;
	}

p.figure {
	font-style: italic;
	font-size: 3;
	margin-top: 0.08in;
	}

h1,h2, h3, h4, h5 {
	/* Kaazing blue */
	color: #44687d;
	/* setup some more readable header spacing */
	padding-bottom: 5px;
	margin: 5px 0 5px 0;
}

h1 { 
	font-size: 175%;
}

h2 {
	font-size: 150%;
}

h3 {
	font-size: 135%;
	/* Kaazing Web Orange */
}

h4 {
	font-size: 120%;
}

h5 {
	font-size: 110%;
	font-weight: bolder;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

ul.arrow-2 li {
	background: url(../images/arrow-2.png) 2px 2px no-repeat;
	list-style: none;
	padding-left: 25px;
	padding-bottom: 5px;
	}

/* @group Notice Styles */
span.alert,
span.info,
span.download,
span.note {
	display: block;
	padding: 10px 10px 10px 45px;
	margin: 15px 0;	
}

span.alert {
	color: #c00;
	border-top: 3px solid #fe7b7a;
	border-bottom: 3px solid #fe7b7a;
	background: #ffffff url(../images/status-alert.png) 10px 50% no-repeat;
	margin: 0px 20px 0px 0px;
}

span.info {
	color: #44687d;
	border-top: 3px solid #44687d;
	border-bottom: 3px solid #44687d;
	background: #ffffff url(status-info.png) 10px 50% no-repeat;
	margin: 0px 20px 0px 0px;
}

span.note {
	color: #cd5a13;
	border-top: 3px solid #f37333;
	border-bottom: 3px solid #f37333;
	background: #ffffff url(../images/status-note.png) 10px 50% no-repeat;
	margin: 0px 20px 0px 0px;
}

span.download {
	color: #5a8e22;
	border-top: 3px solid #5a8e22;
	border-bottom: 3px solid #5a8e22;
	background: #ffffff url(../images/status-download.png) 10px 50% no-repeat;
	margin: 0px 20px 0px 0px;
}

/* @Code formatting for span elements */
span.code {
	font-family:"Courier New", Courier, monospace;
	color:#FFFFFF;
	background-color: #44687d;
	margin: 0px 20px 10px 0px;
	padding: 10px 20px; 
	}
/* @end */

#overall_frame {
	position:relative;
	text-align:center;
	width: 100%;
 	}
	
#wrapper {
    margin: 0pt auto;
	text-align:left;
	padding: 0pt;
	width: 960px;
	background-color:#FFFFFF
	}
	
#header {
    height: 50px;
    background: url(../images/kaazing.gif)  right no-repeat;
	
	}
	
#menu {
	position:relative;
	top: 135px;
	left: 40px;
	height: 20px;
	width:870px;
	}
	
#menu a {
	color:#FFFFFF;
	font-weight:bold;
	padding: 0px 20px 0px 0px;
	}
	
#menu a:hover {
	color:#ff5113;
	font-weight:bolder;
	}

#content {
	position:relative;
	margin: 0px 20px 10px 20px;
	}

#main_home {
    background: url(../images/side_banner.jpg) top right no-repeat;
	position:relative;
	padding: 0px 130px 10px 20px;
	}

#main {
	position:relative;
	padding: 0px 10px 10px 20px;
	border-left: 3px solid #f47d31;
	border-right: 3px solid #f47d31;
	border-bottom: 3px solid #f47d31; 
	border-top: 3px solid #f47d31;
	}

#footer {
	position:relative;
    height: 50x;
	text-align:center;
	color: #44687d;
	font-size: 75%;
	}	

#widget {
    height: 400px;
    width: 800px;
}

#geodata {
    border: 2px solid #44687d;
    width: 400px;
    height: 100px;
    display: block;
    margin: 20px 0px;
}

【上篇】ASP.NET Cookie
【下篇】通过HtmlInputFile控件上传文件的类

作者: lovely1018

该日志由 lovely1018 于10年前发表在综合分类下，最后更新于 2013年12月06日.
转载请注明: html5 postMessage | 学步园 +复制链接

抱歉!评论已关闭.

学步园

html5 postMessage

作者: lovely1018

书签

最新文章New

本站推荐

返回首页