javascript基础-HTML5

javascript基础-HTML5-LMLPHP

跨文档消息(Web Messaging cross-document messaging)

　　原理

　　　　往有关联(同一框架/弹出)的文档传递数据。

　　　　 javascript基础-HTML5-LMLPHP

　　写法

　　　　两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

　　查看详情

5m

javascript基础-HTML5