了解HTML5和“她”的 API (二)

  Communication(通信)

        Cross Document Messaging (跨文档消息通信)

     postMessage API   origin security(源安全)

chatFrame.contentWindow.postMessage('hello','http://www.a.com/');
window.addEventListener('message',messageHandler,true);
function messageHandler(e){
	switch(e.origin){
		case 'http://www.a.com/':
			//处理消息
			processMessage(e.data);
		break;
		defaule:
			//消息来源无法识别
			//忽略消息
	}
}
//消息事件是一个拥有data(数据)和origin(源)属性的DOM事件。
//data属性是发送方传递的实际消息
//origin属性是发送来源

  

//判断浏览器是否支持postMessage API
if(typeof window.postMessage === 'undefined'){
	//不支持postMessage
}

//发送消息
window.postMessage('hello','http://www.a.com/');
chatFrame.contentWindow.postMessage('hello','http://www.a.com/');

//监听
var originWhiteList = ['http://www.a.com/','http://www.b.com/','http://www.c.com/'];
function checkWhiteList(origin){
	for(var i = 0, n = originWhiteList.length; i < n; i++){
		if(origin === originWhiteList[i]) return true;
	}
	return false;
}
function messageHandler(e){
	if(checkWhiteList(e.origin)){
		//处理消息
		processMessage(e.data);
	}else{
		//忽略消息
	}
}

   HTML5定义的MessageEvent接口也是HTML5 WebSockets和HTML5 Web Workers的一部分。

   HTML5的通信功能中用于接收消息的API与MessageEvent接口是一致的。

   XMLHttpRequest Level 2

     跨源XMLHttpRequests  

     跨源HTTP请求包括一个origin头部,为服务器提供HTTP请求的源信息。

    构建基于非同源服务的web应用程序

  

    进度事件(Progress events)

//检测浏览器是否支持XMLHttpRequest level 2
var xhr = new XMLHttpRequest();
if(typeof xhr.withCredentials === 'undefined'){
	//支持cross origin XMLHttpRequest
}else{
	//不支持 
}
//使用进度事件
xhr.onprogress = function(e){
	if(e.lengthComputable){
		var ratio = e.loaded / e.total;
		//处理进度信息
	}
}
xhr.upload.onprogress = function(e){
	if(e.lengthComputable){
		var ratio = e.loaded / e.total;
		//处理进度信息
	}
}
xhr.onload = function(e){
	//完成 finished
}
xhr.onerror = function(e){
	//错误 error
}
//跨源请求
xhr.open('GET','http://www.a.com/',true);
xhr.send();

   Framebusting  

//Framebusting技术保证某些内容不被加载到iframe中
if(window !== window.top){
	window.top.location = location;
}

var framebustTimer;
var timeout = 3000;
if(window !== window.top){
	framebustTimer = setTimeout(function(){
		window.top.location = location;
	},timeout);
}
window.addEventListener('message',function(e){
	switch(e.origin){
		case trustedFramer:
			clearTimeout(framebustTimer);
		break;
	}
},true);

  WebSockets(双工通信协议)

  WebSockets定义了一个全双工通信信道,通过web上的一个socket即可进行通信。

  以前的实时web应用:客户端轮询服务器推送

  commet: 服务器主动以异步方式向客户端推送数据。

  轮询:浏览器会定期发送HTTP请求,并随时接收响应。

  长轮询:浏览器向服务器发送一个请求,服务器会在一段时间内将其保持在打开状态。

  为了建立WebSocket通信,客户端和服务器在初始连接时,将HTTP协议升级到WebSocket协议。

  一旦连接建立成功,就可以在全双工通信模式下在客户端和服务器之间来回传送WebSocket消息。

  

//检测浏览器是否支持WebSocket
if(window.WebSocket){
	//支持WebSocket
}else{
	//不支持 
}
//WebSocket连接 (ws://)
//安全的WebSocket连接 (wss://)
var url = 'ws://www.a.com:8080/websocket';
var w = new WebSocket(url);
w.onopen = function(e){
	//打开 发送消息
	//var a = new Uint8Array([8,6,5,4,3,2,1]);
	//w.send(a.buffer);
	w.send('hello');
}
w.binaryType = 'arraybuffer';
w.onmessage = function(e){
	//e.data
}
w.onclose = function(e){
	//关闭
}
w.onerror = function(e){
	//错误
}

  Forms(表单) 

  新的输入型控件

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

  新的函数和特性

   新的 form 属性

  • autocomplete
  • novalidate

  新的 input 属性

  • autocomplete
  • autofocus
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height 和 width
  • list
  • min, max 和 step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

   Drag and Drop(拖放)

  开始拖放:单击和拖动鼠标指针,拖动的项或区域叫拖动源(drag source);释放鼠标指针完成操作,到达的项或目标区域被称为放置目标(drop target)。  

    拖放事件

dragstart	//开始拖动页面中某个元素时(在拖动源上调用 设置数据类型 dataTransfer setData)
drag 		//拖动中持续发生的事件(在拖动源上调用)
dragenter	//拖动跨入页面中的新元素时(新元素上调用)
dragleave	//拖动离开触发dragenter事件的元素时(新元素上调用)
dragover	//拖动过程中移动到某个元素上是时(停留的目标调用)
drop		//释放鼠标时,在当前停留的目标上调用(处理数据 dataTransfer getData)
dragend		//在拖动源上触发,表示拖动完成

     

    设置元素可拖动 

1. 设置元素可拖放 draggable="true"
2. 拖动什么 - ondragstart  setData()
3. 放到何处 - ondragover
4. 进行放置 - ondrop  getData()

function dragstart(e){
	//e.effectAllowed = 'copy';
	e.dataTransfer.setData('text',e.target.textContent);
	//e.dataTransfer.setData('text',e.target.id);
}
function dragover(e){
	e.stopPorpagation();
	e.preventDefault();
	return false;
}
function drop(e){
	e.stopPorpagation();
	e.preventDefault();
	var data = e.dataTransfer.getData("text");
	//data..
	return false;
}

    传输和控制

    dataTransfer对象用于获取和设置时间的放置数据

 
dataTransfer对象的属性和方法:
setData(format,data) //在ondragstart中调用,注册一个MIME类型格式的传输项
getData(format)	//获取指定类型的注册数据项
types //以数组形式返回所有当前注册的格式
items //返回所有项及其相关格式的列表
files //返回放置相关的所有文件
clearData() //不带参数清空所有注册的数据,给格式参数仅清除特定的注册数据
setDragImage(element,x,y) //使用已存在的图像元素作为拖动图像
addElement(elemnet) //提供一个页面元素 并作为拖动反馈
effectAllowed //设置某种操作可被选用 (none,copy,copyLink,copyMove,link,linkMove,mouv,all)
dropEffect //确定当前操作的哪一种类型 或者强制执行某种操作类型

   拖放文件

   File API能够在网页中异步读取文件,将文件上传至服务器并跟踪上传状态,还可以将文件转换成页面元素。

dataTransfer.files:
name //带有扩展名的文件全名
type //文件的MIME类型
size 以字节为单位的文件大小
lastModifiedDate //最后一次修改文件内容的时间戳

  在浏览器外拖放文件到浏览器内,不会触发拖放源的dragstart,drag,dragend事件,因为拖放源不是浏览器web内的元素,而是系统文件。

  在拖放系统文件时,可以在浏览器web中的放置区域绑定dragenter,dragover,dragleave,drop事件。 

var dropfile = function(opts){
	this.fileArea = document.getElementById(opts.fileArea);
	this.textArea = document.getElementById(opts.textArea);
	this.imageArea = document.getElementById(opts.imageArea);
	this.init();
};
dropfile.prototype = {
	init: function(){
		this.textArea.innerHTML = '拖放文件区域';
		this.bind();
	},
	bind: function(){
		var _this = this;
		this.fileArea.addEventListener('dragenter',function(e){
			_this.dragEnter(e);
		},false);
		this.fileArea.addEventListener('dragover',function(e){
			_this.dragOver(e);
		},false);
		this.fileArea.addEventListener('dragleave',function(e){
			_this.dragLeave(e);
		},false);
		this.fileArea.addEventListener('drop',function(e){
			_this.drop(e)
		},false);
	},
	dragEnter: function(e){
		var files = e.dataTransfer.files;
		if(files){
			this.textArea.innerHTML = '拖动了'+ files.length +'个文件';
		}else{
			this.textArea.innerHTML = '没有拖动的文件';
		}
		e.stopPropagation();
		e.preventDefault();
		return false;
	},
	dragOver: function(e){
		e.stopPropagation();
		e.preventDefault();
		return false;
	},
	dragLeave: function(e){
		this.textArea.innerHTML = '拖放文件区域';
	},
	drop: function(e){
		e.stopPropagation();
		e.preventDefault();
		var files = e.dataTransfer.files;
		this.readFileInfo(files);
		this.readFileByImage(files);
	},
	readFileByImage: function(files){
		var _this = this;
		[].forEach.call(files,function(file){ 	
	     	if (!!file.type.match(/image/)) {  
	        	var reader = new FileReader(); 
	        	reader.readAsDataURL(file); 
	            reader.onload = function (e) {
	            	_this.imageArea.innerHTML += '<img src='+ reader.result +' title="'+ file.name +'" />';
	            }; 
			}	            
	    }); 
	},
	readFileInfo: function(files){
		var message = '<ol>';
		[].forEach.call(files,function(file){
			message += '<li>';
			message += '文件名称:'+ file.name +'
'; message += '文件类型:'+ file.type +'
'; message += '文件大小:'+ file.size +'
'; message += '文件最后修改时间:'+ file.lastModifiedDate +'
'; message += '</li>'; }); message += '</ol>'; this.textArea.innerHTML = message; } } window.onload = function(){ new dropfile({ fileArea: 'fileArea', textArea: 'textArea', imageArea: 'imageArea' }); }

  

posted @ 2015-07-27 11:55  eyeear  阅读(277)  评论(0编辑  收藏  举报