欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5 通信API 跨域門(mén)檻將不再高、數(shù)據(jù)推送也不再是夢(mèng)

  發(fā)布時(shí)間：2013-04-25 10:31:23   作者：佚名   我要評(píng)論
HTML5新增通信相關(guān)兩個(gè)API，跨文檔消息傳輸與WEB Sockets API，跨文檔消息傳輸功能，可以在不同網(wǎng)頁(yè)文檔，不同端口（跨域情況下）進(jìn)行消息傳遞。使用web sockets api 可以讓客戶(hù)端與服務(wù)器端通過(guò)socket端口傳遞數(shù)據(jù)，這樣便可以使用數(shù)據(jù)推送技術(shù)
前言

HTML5新增通信相關(guān)兩個(gè)API，跨文檔消息傳輸與WEB Sockets API，

跨文檔消息傳輸功能，可以在不同網(wǎng)頁(yè)文檔，不同端口（跨域情況下）進(jìn)行消息傳遞。

使用web sockets api 可以讓客戶(hù)端與服務(wù)器端通過(guò)socket端口傳遞數(shù)據(jù)，這樣便可以使用數(shù)據(jù)推送技術(shù)。

跨文檔消息傳輸

在之前我們?nèi)粝肟缬颢@取信息會(huì)花很多功夫，現(xiàn)在只要獲取網(wǎng)頁(yè)所在窗口對(duì)象實(shí)例變可以實(shí)現(xiàn)互相通信。

首先要想從其他窗口接受發(fā)過(guò)來(lái)的消息需要對(duì)其窗口對(duì)象進(jìn)行監(jiān)聽(tīng)：

window.addevntListener('message', function () {}, false)

使用windows對(duì)象的postMessage方法向其他窗口發(fā)生信息：

otherWindow.postMessage(message, targetOrigin)第一個(gè)參數(shù)為發(fā)送文本，也可以是js對(duì)象（json）第二個(gè)參數(shù)為接收消息對(duì)象窗口的URL，可以使用通配符

簡(jiǎn)單示例：

復(fù)制代碼
代碼如下:

post信息
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
window.addEventListener('message', function (ev) {
//應(yīng)該要檢查消息來(lái)源
$('#msg_box').html(ev.origin + ' 發(fā)來(lái)消息：' + 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" />
<button id="send">
發(fā)送信息</button>
<iframe src="02.htm" width="400"></iframe>
<div id="msg_box">
</div>
</body>
</html>

在以上基礎(chǔ)上我們做一點(diǎn)修改，我們?cè)谧禹?yè)面給出高寬按鈕，用于告訴父窗口怎么改變iframe高寬：

復(fù)制代碼
代碼如下:

父層代碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
window.addEventListener('message', function (ev) {
//應(yīng)該要檢查消息來(lái)源
$('#msg_box').html(ev.origin + ' 發(fā)來(lái)消息：' + 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" />
<button id="send">
發(fā)送信息</button>
<iframe src="02.htm" width="400" id="f"></iframe>
<div id="msg_box">
</div>
</body>
</html>


復(fù)制代碼
代碼如下:

子層代碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var url = '';
var source = '';
window.addEventListener('message', function (ev) {
//此處需要做來(lái)源驗(yàn)證
if (ev.origin) { }
$('#msg').html(ev.origin + ' 發(fā)來(lái)消息：' + 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" />
<button id="send">
改變外層高度</button>
</body>
</html>

最后為我們的e截個(gè)圖：

更加靈活的運(yùn)用，該api還可以更厲害的運(yùn)用，我們可以傳遞函數(shù)名什么的，反正可做很多事情了。

web sockets 通信

web sockets 是HTML5提供的在web應(yīng)用程序中客戶(hù)端與服務(wù)器端之間進(jìn)行非HTTP的通信機(jī)制

他實(shí)現(xiàn)了http不容易實(shí)現(xiàn)的服務(wù)器的數(shù)據(jù)推送等智能通信技術(shù)，因此受到了很高的關(guān)注。

使用web sockes api 可以在服務(wù)器端與客戶(hù)端建立非HTTP的雙向連接，這個(gè)連接是實(shí)時(shí)的也是永久的，除非顯式關(guān)閉

這意味著當(dāng)服務(wù)器想向客戶(hù)端發(fā)送數(shù)據(jù)時(shí)，可以立即將數(shù)據(jù)推送到客戶(hù)瀏覽器中，無(wú)需重新建立連接。

只要客戶(hù)端有一個(gè)被打開(kāi)的socket并且與服務(wù)器建立了連接，服務(wù)器就可以將數(shù)據(jù)推送到這個(gè)socket上，服務(wù)器不再需要輪詢(xún)客戶(hù)端請(qǐng)求，化被動(dòng)為主動(dòng)。

web sockets api

復(fù)制代碼
代碼如下:

var webSocket = new WebSocket('ws://localhost:8005/socket');
url必須使用ws或者wss（加密）作為頭,這個(gè)url設(shè)定好后，在javascript腳本中可以通過(guò)訪問(wèn)websocket對(duì)象的url來(lái)重新獲取
通信建立連接后，就可以雙向通信了，使用websocket對(duì)象的send方法加json數(shù)據(jù)便可將任何形式數(shù)據(jù)傳往服務(wù)器：</p> <p>webSocket.send(msg);
通過(guò)onmessage事件來(lái)接收服務(wù)器傳送過(guò)來(lái)數(shù)據(jù)：
webSocket.onmessage = function (e) {
　　var data = e.data;
};
通過(guò)onopern事件監(jiān)聽(tīng)socket打開(kāi)事件：
webSocket.onopen = function (e) { };
通過(guò)onclose監(jiān)聽(tīng)socket關(guān)閉事件：
webSocket.onclose = function (e) {};
通過(guò)webSocket.close()方法關(guān)閉socket連接；</p> <p>通過(guò)readyState屬性獲取websocket對(duì)象狀態(tài)：
CONNECTION 0 正在連接
OPEN 1 已經(jīng)連接
CLOSING 2 正在關(guān)閉
CLOSE 2 已經(jīng)關(guān)閉

PS：，因?yàn)槲也粫?huì)配置服務(wù)器塊的socket相關(guān)，所以暫時(shí)不能進(jìn)行測(cè)試，該問(wèn)題留待二次學(xué)習(xí)時(shí)解決。

整個(gè)代碼還是很簡(jiǎn)單的:

復(fù)制代碼
代碼如下:

// 創(chuàng)建一個(gè)Socket實(shí)例
var socket = new WebSocket('ws://localhost:8080'); </p> <p>// 打開(kāi)Socket
socket.onopen = function(event) { </p> <p> // 發(fā)送一個(gè)初始化消息
socket.send('I am the client and I\'m listening!'); </p> <p> // 監(jiān)聽(tīng)消息
socket.onmessage = function(event) {
console.log('Client received a message',event);
}; </p> <p> // 監(jiān)聽(tīng)Socket的關(guān)閉
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
}; </p> <p> // 關(guān)閉Socket....
//socket.close()
};

相關(guān)文章

  • html5中幾個(gè)不容錯(cuò)過(guò)的api或者tips小結(jié)

    之前的一直有關(guān)注一些HTML 5中的值得關(guān)注但少用的API或者tips，這次繼續(xù)小結(jié)一些,有需要的朋友可以參考下，希望可以幫助你們
    2013-01-04

  • 5 個(gè)強(qiáng)大的HTML5 API 函數(shù)推薦

    本文給大家推薦了5個(gè)html5的新型API函數(shù)，包括全屏API（Fullscreen API）、頁(yè)面可見(jiàn)性API（Page Visibility API）、getUserMedia API、電池API（Battery API）、 Link Pref
    2014-11-19

  • HTML5中5個(gè)簡(jiǎn)單實(shí)用的API

    當(dāng)你在人群中談?wù)摰健癏TML5”，你也許會(huì)感覺(jué)到，自己像一位異域舞者或獨(dú)角獸，來(lái)到屋子中間，帶有明顯的“我很酷，我知道它”的意味
    2014-04-28

  • html5中 media（播放器）的api使用指南

    這篇文章主要介紹了html5中 media（播放器）的api使用指南,需要的朋友可以參考下
    2014-12-26

  • HTML5學(xué)習(xí)筆記之History API

    這系列文章主要是學(xué)習(xí)Html5相關(guān)的知識(shí)點(diǎn)，以學(xué)習(xí)API知識(shí)點(diǎn)為入口，由淺入深的引入實(shí)例，讓大家一步一步的體會(huì)"h5"能夠做什么，以及在實(shí)際項(xiàng)目中如何去合理的運(yùn)用達(dá)到使用自
    2015-02-26

最新評(píng)論