<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crossdomain | postMessage + window.name</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body, button{
font-family: Verdana, Arial;
color: #333;
}
h1{
text-align:center;
font-size:24px;
}
.wrapper{
padding:10px;
width:640px;
}
.wrapper, #child{
border:#A11111 2px solid;
}
#info{
color:#00F;
height:30px;
overflow-y:auto;
}
</style>
<script type='text/javascript' src='http://crossdomain.sinaapp.com/xd/util.js'></script>
<script type='text/javascript' src='http://crossdomain.sinaapp.com/xd/xd.js'></script>
</head>
<body>
<h1>CrossDomain using (postMessage + window.name)</h1>
<div class='wrapper'>
<p>Host window, <strong>woiweb.net</strong></p>
<input type="text" value="500px" id="val" />
<button id='trigger'>Send Message</button>
<p id='info'></p>
<iframe width='600' height='140' scrolling='auto' frameborder='0'
id='child' src='http://crossdomain.sinaapp.com/xd/iframe.html'></iframe>
</div>
<script type='text/javascript' >
var send = function() {
var val = $E('val').value;
val = val || '500px';
var json = {
'height' : val
};
XD.sendMessage($E('child').contentWindow, json);
};
var callback = function(data) {
$E('info').innerHTML = jsonToStr(data);
$E('child').style.height = data.height;
};
XD.receiveMessage(callback);
addEvent($E('trigger'), 'click', send);
</script>
</body>
</html>
