preface

object using the Windows postMessage method information to the other Windows:

simple example:

  code is as follows:  


the post information <! DOCTYPE html>
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> </title>
<Script SRC="http://www.script-home.com//jquery-1.7.1.js" type="text/javascript" ></script>
<The script type="text/javascript" >
$(document).ready(function () {
window.addEventListener('message', function (ev) {
//应该要检查消息来源
$('#msg_box').html(ev.origin + ' 发来消息:' + ev.data);
}, false);

$('#send').click(function () {
var frame=window.frames[0];
frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm');
});
});

</script>
</head>
<Body>
<Input type="text" id="MSG"/>
<The button id="send" >
send information </button>
<Iframe SRC="http://www.script-home.com//html5/02.htm" width="400" ></iframe>
<Div id="msg_box >"
</div>
</body>
</html>

code is as follows:


the parent layer code <! DOCTYPE html>
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> </title>
<Script SRC="http://www.script-home.com//jquery-1.7.1.js" type="text/javascript" ></script>
<The script type="text/javascript" >
$(document).ready(function () {
window.addEventListener('message', function (ev) {
//应该要检查消息来源
$('#msg_box').html(ev.origin + ' 发来消息:' + ev.data);

var w_h=ev.data;
//未做格式检查
$('#f').css('width', w_h.split(',')[0] + 'px');
$('#f').css('height', w_h.split(',')[1] + 'px');

}, false);

function p() {
var frame=window.frames[0];
frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm');
}
$('#send').click(function () {
p();
});
setTimeout(p, 200);

});

</script>
</head>
<Body>
<Input type="text" id="MSG"/>
<The button id="send" >
send information </button>
<Iframe SRC="http://www.script-home.com//html5/02.htm" width="400" id="f" ></iframe>
<Div id="msg_box >"
</div>
</body>
</html>

  code is as follows:  


sub-layer code <! DOCTYPE html>
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Title> </title>
<Script SRC="http://www.script-home.com//jquery-1.7.1.js" type="text/javascript" ></script>
<The script type="text/javascript" >
$(document).ready(function () {
var url='';
var source='';
window.addEventListener('message', function (ev) {
//此处需要做来源验证
if (ev.origin) { }
$('#msg').html(ev.origin + ' 发来消息:' + ev.data);
url=ev.origin;
source=ev.source;
//ev.source.postMessage('这里是:' + this.location, ev.origin);
});

$('#send').click(function () {
source.postMessage($('#w_h').val(), url);
});
});
</script>
</head>
<Body>
<Div id='MSG' >
</div>
<Input type="text" id="w_h/>"
<The button id="send" >
to change the outer height </button>
</body>
</html>

code is as follows:


var webSocket=new webSocket (ws://localhost: 8005/socket ', ');
url must use the ws or WSS (encryption) as a head, set this url, the javascript script can be used to access the websocket object url to retrieve
the communication connection is established, can two-way communication, the send method using websocket object add json data is any data can be transmitted to a server: </p><P> The webSocket. Send (MSG);
by onmessage event to sent the data receive server:
the webSocket. The onmessage=function (e) {
var data=http://www.script-home.com//html5/e.data;
};
by onopern listening socket open events:
the webSocket. The onopen=function (e) {};
with onclose listening socket closed events:
the webSocket. Onclose=function (e) {};
by webSocket. The close () method to close the socket connection; </p><P> Websocket captured by the readyState attribute object state:
CONNECTION 0 is CONNECTION

OPEN 1 is connected CLOSING 2 are CLOSING
CLOSE 2 has been closed

PS:, because I don't know how to configure the server socket related, so temporarily can't test, for secondary learning to solve the problem.
code is as follows:


//
creates a Socket instance var Socket=new WebSocket (ws://localhost: 8080 '); </p><P>//open the Socket
the Socket. The onopen=function (event) {</p><P>//send an initialization messages
socket. Send (' I am the client and I \ 'm listening!'); </p><P>//to monitor messages
the socket. The onmessage=function (event) {
the console. The log (' the Client received a message ', the event);
}; </p><P>//to monitor the closure of the Socket
the Socket. The onclose=function (event) {
the console. The log (' the Client notified the Socket from the closed ', the event);
}; </p><P>//close the Socket...
//socket. The close ()
};


This concludes the body part