javascript基础-HTML5

本文详细介绍了跨文档通信的Web Messaging技术原理与实现,包括iframe与弹出窗口之间的消息传递。同时,深入探讨了资源缓存、数据存储如Cookie、SessionStorage、LocalStorage和IndexedDB的使用场景与限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

跨文档消息(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.5MIE8+以前依赖web服务器存储的session数据可以进一步细分服务端和客户端,分开存储。
方便前端读取。
从容量和API方面,增强版的cookie每个来源 5M/2.5MIE8+同cookie.数据存储扩大。
浏览器本地数据库。目的是为应用APP,提供一套高效CRUD js对象的API。具体具备游标、索引、事务等数据库能力。CRUD均是异步操作。无限制IE10+需大数据存储的APP


 Web 
Workers

   查看详情

 

转载于:https://www.cnblogs.com/mominger/p/3955509.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值