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;
}