文件通訊(跨域-不跨域)、時時通訊(websocket)、離線儲存(applicationCache)、開啟多執行緒(web worker)
阿新 • • 發佈:2019-02-14
一、文件間的通訊 postMessage物件 //不跨域 1、iframe:obj.contentWindow [iframe中的window物件] iframe拿到父級頁面的window: parent(上一層window) top(最頂層window) 2、window.open() 返回值是新視窗的window物件 拿到父級window : window.opener //跨域 3. 目標域的window.postMessage("xxx","目標域"); 目標域:監聽message事件,在ev.data中拿到傳送過來的訊息 4.ajax需要服務端配合:允許我跨域訪問 5.jsonp //無重新整理上傳檔案 obj.fiels //獲取檔案列表 var FD = new FormData(); FD.append('name',files[0]) //構建二進位制物件 //ajax傳送二進位制資料給後臺 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if( xhr.status == 200 ){ var res = JSON.parse(xhr.response); alert(res.msg); } } } //ajax傳送原始檔 xhr.open('post','post_file.php',true); xhr.setRequestHeader('X-Request-with','XMLHttpRequest'); xhr.send(FD); xhr.upload //上傳進度物件 事件: onprogress: 上傳事件(上傳過程中連續觸發) 屬性: ev.total(要傳送的總量) ev.loaded(已傳送的總量) 二、websocket:通訊協議 -> 與 http類似 (參考阮一峰2012‘網際網路協議入門篇’) 1.nodejs搭建前後端 2.使用websocket實現時時傳輸: a].安裝socket.io:npm install socket.io 引入sokit.io包 //服務端 a].var io = require('socket.io'); var soket = io.listen(httpServer); b].soket.sokets.on('connection',function(socket){ //socket -> 每個人進來都會產生一個socket }); //有人進來的事件監聽,執行回掉 e]. 服務端->客戶端:socket.emit('hello','資料'); h]. 監聽客戶端'hellohello'事件:socket.on('hellohello',function(data){ //data 客戶端過來的資料(資料1) }); i]. socket.broadcast.emit('a','有新人進來了'); //廣播(除了當前的人(剛剛進來的人)接收不到) //客戶端 c].客戶端需要傳送tcp連結,引入client.socket.js檔案 [提供一個io物件。 d]. var socket = null;socket = io.connect('url');傳送tcp請求 f]. 客戶端監聽hello事件: socket.on('hello',function(data){ //data 服務端過來的資料 }); g]. 客戶端 -> 服務端:socket.emit('hellohello','資料1'); 三、applicationCache 離線儲存 1、搭建離線應用程式 //伺服器設定頭資訊 AddType text/cache-manifest .manifest //http.comfig中加 nodeJs: 'AddType': 'text/cache-manifest .manifest' //html標籤新增屬性: manifest='cache.manifest' //xxx就是離線儲存的清單列表 //新建cache.manifest檔案 先寫: -CACHE MANIFEST -2.png //就會快取2.png圖片 -FALLBACK -styl1.css style2.css //第一個網路地址沒有獲取到,就走第二個快取 -NETWORK:無論快取是否有,都從網路獲取 四、web worker [開啟多執行緒 1.使用: //主js中: var w1 = new Worker('worker1.js'); //開啟多執行緒 w1.postMessage('wenwen'); //用於傳遞資料 //worker1.js中: self.onmessage = function(ev){ //self == w1 引用此檔案的返回值 ev.data } <!-- console.time(1); . . console.timeEnd(1); //計算執行中間的程式碼使用的時間,在控制檯打印出來 --> 2.執行環境: navigator:appName appVersion userAgent platform location:所有屬性只讀 self: 只想全域性worker物件 所有的ECMA物件:Objec... XMLHttpRequest setTimeout setIntercal self.close()方法:內部立即停止worker執行 worker.terminate()//外部結束程序 importScripts('xxx.js')方法引入其他js檔案 五、小功能: 1、標籤可編輯屬性:contenteditable='true'