跨文档消息(Web Messaging cross-document messaging)
原理
往有关联(同一框架/弹出)的文档传递数据。
Message Channel在javascript基础-ajax做了解释
写法
两iframe通信
//一框架发送消息
$('#myi')[0].contentWindow.postMessage("adfasdf","*"); //另一个框架接收消息 IE8用attachEvent
$('#myi2')[0].contentWindow.addEventListener('message',function(e){
//e.data传递的数据 e.origin来源域 e.source代理,用来回传信息
console.log(e.data);//控制台输出"adfasdf"
},false);
弹出窗口通信
//弹出窗口给父窗体窗体发送消息
window.addEventListener('load', function(e){
//标记这消息来自http://www.suning.com
e.currentTarget.opener.postMessage('', 'http://www.suning.com');
}, false);
用途
IE8+支持iframe间的Web messaging。它具备通用性。
以前两iframe通信,如果同源: 直接调用另一个iframe的全局方法。如果跨域:无法直接访问另一iframe的window,那时的解决方案:
跨域类型 | 解决方案 |
同主域 | 设置document.domain切换成同源 |
不同主域 | 通过parent中转 如a 子iframe b。设置一个与b同源的祖先iframe c.bl通过parent.parent访问c。b通过parent访问c。 |
资源缓存
适合离线应用APP。配置manifest文件,设置缓存资源--->html读取缓存资源。查看详情
数据存储
原理 | 容量限制 | 浏览器兼容 | 适合场景 |
存储少量数据到硬盘,任何人可以访问。 ajax请求时自动附加 CORS跨域允许附加 jsonp跨域不附加 |
IE/Firefox 50个键值对 <4095B 突破键值对方式:值映射成多个键值对 |
全部 | 存储少量跨会话的数据。
如用户已登录过,30天内不失效。将用户登录标识记录在cookie里 |
会话数据存储 浏览器关闭自动清除 |
总容量5M/2.5M | IE8+ | 以前依赖web服务器存储的session数据可以进一步细分服务端和客户端,分开存储。 方便前端读取。 |
从容量和API方面,增强版的cookie | 每个来源 5M/2.5M |
IE8+ | 同cookie.数据存储扩大。 |
浏览器本地数据库。目的是为应用APP,提供一套高效CRUD js对象的API。具体具备游标、索引、事务等数据库能力。CRUD均是异步操作。 |
无限制 | IE10+ | 需大数据存储的APP |
Web Workers