最近做项目在前端我使用了很多新技术，这些技术有bootstrap、angularjs，不过最让我兴奋的还是使用了HTML5的技术，今天我想总结一些HTML5的技术，好记性不如烂笔头，写写文章可以很好的整理思路，写到博客里还能做个备忘。

　　1) 跨域通讯

　　现在做企业项目，前端很不自然的会大量使用iframe标签，我以前在文章里提到iframe是一个效率极其低下的标签，但是如果项目没有什么性能的苛求，使用iframe还是非常的方便的。

　　使用iframe经常碰到父子窗体通讯的问题，我们看看下面的代码：

　　父页面代码：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>父窗体</title>
</head>
<body><spanid="superSpan">父窗体</span>&nbsp;&nbsp;<buttononclick="pTest()">点击</button><iframesrc="inner.html"width="300"></iframe>
</body>
</html>
<scripttype="text/javascript">varsuperStr= "父窗体：hello iframe";functionpTest(){vars=window.frames[0].window.subStr;alert(s);}</script>

　　子窗体页面代码：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>子窗体</title>
</head>
<body><spanid="subSpan">子窗体</span>&nbsp;&nbsp;<buttononclick="sTest()">点击</button>
</body>
</html>
<scripttype="text/javascript">varsubStr= "子窗体：OK，Good!";functionsTest(){vars=parent.superStr;alert(s);}</script>

　　由上面例子我们可以知道父子窗体可以进行信息的交流，不过这个交流局限性很高，它只能是做到javascript变量和方法的相互交流，如果我们想在父页面操作子页面的DOM结构或者子页面想操作父页面的DOM结构，这都是不行的(不过这点在我即将要说到的技术也是没法做到的)，另外还有一个非常重要的一点那就是这些操作必须是同域下的。

　　今天我介绍下HTML5里实现父子窗体通讯的解决方案，它不仅可以在同域下相互发送信息，在不同域名下也是可以相互发送信息的。

　　同域名下的例子：

　　父窗体：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>HTML5通讯API</title>
</head>
<body><h1>通讯示例，相同域名下</h1><iframewidth="500"src="http://localhost:63342/socketprj/sub.html"onload="test()"></iframe><divid="showcontent"></div>
</body>
</html>
<scripttype="text/javascript">window.addEventListener("message",function(evt){document.getElementById("showcontent").innerHTML=evt.data;},false);functiontest(){varfrm=window.frames[0];frm.postMessage("你好，我是父页面访问地址是http://localhost:63342/socketprj/main.html","http://localhost:63342/socketprj/sub.html");}</script>

　　子窗体：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>子页面</title>
</head>
<body>子页面</body>
</html>
<scripttype="text/javascript">window.addEventListener("message",function(evt){console.log(evt);document.body.innerHTML= "父页面过来的数据：" +evt.data;evt.source.postMessage("子页面回传过来的信息地址是" + this.location+ "，父页面的地址是" +evt.origin,evt.origin);},false);</script>

　　这种跨域通讯方式其实就是一个事件，这个事件就是message事件，它是window对象下的一个事件，接收信息就是给window对象绑定message事件，event对象的data属性可以获取发送过来的信息，发送信息则是使用postMessage方法了。

　　如果是跨域，子窗体的代码不变同上，父窗体代码如下：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>HTML5通讯API</title>
</head>
<body><h1>通讯示例，不相同域名下</h1><iframewidth="500"src="http://localhost:8080/sub.html"onload="test()"></iframe><divid="showcontent"></div>
</body>
</html>
<scripttype="text/javascript">window.addEventListener("message",function(evt){document.getElementById("showcontent").innerHTML=evt.data;},false);functiontest(){varfrm=window.frames[0];frm.postMessage("你好，我是父页面访问地址是http://localhost:63342/socketprj/main.html","http://localhost:8080/sub.html");}</script>

　　2) 浏览器的多线程技术：web worker

　　这里我们先看一个例子吧，这个例子是没有使用多线程技术做一个超长javascript运算，代码如下：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>对比测试的参照页面worker</title>
</head>
<body><h1>对比测试的参照页面:javascript执行时间过长会导致浏览器终止javascript执行</h1>请输入:<inputtype="text"id="ipt"/>&nbsp;&nbsp;<buttononclick="test()">计算</button>
</body>
</html>
<scripttype="text/javascript">functiontest(){varnum=parseInt(document.getElementById("ipt").value,10);varres= 0;for(vari= 0;i<num;i++){res+= 1;}alert(res);}</script>

　　我们在页面里输入999999999999，等一段时间，浏览器会弹出一个提示框，如下图所示：

　　浏览器会提示我们去终止javascript执行，这是为啥了？

　　浏览器内部其实包含两个执行引擎，一个是渲染引擎，这个引擎负责页面的展示，一个是javascript引擎，它负责javascript执行，但是浏览器在实际执行的方式是以单线程的方式执行渲染操作和javascript操作，也就是说页面一回只能执行一个操作要么渲染页面要么就是执行javascript代码，因此当javascript执行时候就会阻塞渲染的执行，假如javascript执行时间过长页面加载就会被阻塞，这时候我们就会感觉页面不可用了，为了避免javascript过长执行导致页面无法使用，浏览器在检测到javascript执行到一个极限次数时候就会弹出以上提示框。

　　关于浏览器能不能提供多线程的解决方案有人曾经咨询过javascript之父，这位大师很干脆的说，这是不可能的，他提出的理由是多线程操作过于复杂，那怕是最有经验的程序员也很难控制好多线程技术，引入它只会增加学习成本和开发风险。

　　不过话说回来，传统的浏览器单线程改成多线程执行难度还是很大的，因为javascript是有权利修改页面的展示，如果引入多线程，搞不好程序员就很难正确控制页面的展示了。

　　谷歌的工程师为了让浏览器有更好的用户体验，在HTML5没有出现之前做出了一个解决方案，那就是Gear，Gear其实就是web worker的前身，web worker相当于Gear的升级版，下面我们就来看看web worker的使用吧，代码如下：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>worker单线程，无嵌套</title>
</head>
<body><h1>worker单线程，无嵌套</h1>请输入:<inputtype="text"id="ipt"/>&nbsp;&nbsp;<buttononclick="test()">计算</button>
</body>
</html>
<scripttype="text/javascript">varworker= newWorker("js/worker.js");worker.onmessage= function(evt){alert(evt.data);}functiontest(){varnum=parseInt(document.getElementById("ipt").value,10);worker.postMessage(num);}</script>

　　woker.js的代码如下：

onmessage = function(evt){var num = evt.data;var res = 0;for (var i = 0;i<num;i++){res += 1;// console.log(res);}postMessage(res);
}

　　使用worker技术，我们要把多线程的代码写在一个单独的js文件里面，同时定义一个onmessage方法，这个相当于一个事件的回调函数，回调函数的参数event里的data属性用来接收数据，postMessage方法传输数据，这个做法和前面的message相似。本例子只是演示了一个单线程的例子，我们还可以使用线程嵌套线程，这个我就不细说了，有兴趣的朋友可以尝试一下。

　　3) 本地存储

　　HTML5的web storage技术有两个一个是sessionstorage和localstorage，sessionstorage顾名思义就是只在会话有效，localstorage则是长时间有效，我在项目里做demo程序时候，就使用localstorage做本地存储，相当于一个小型数据库，web storage技术很简单，我就给一个简单例子，代码如下：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>本地存储-存储数据</title>
</head>
<body><h1>本地存储-存储数据</h1>
</body>
</html>
<scripttype="text/javascript">localStorage.setItem("mess","Hello Message!");localStorage.setItem("obj",{id:"111",name:"xtq"});</script>

　　在chrome浏览器里我们可以在控制台里Resource的local Storage找到存储的数据，我们可以发现obj最终存储的是[object,object]，这就说明web storage只能存储字符串，如果我们想存储javascript对象就的将其序列化变成字符串进行存储。

　　4) 多文件上传

　　文件上传使用的标签就是：

<inputtype="file"multiple id="fileIpt"size="120"/>

　　在html4里，这个标签只能上传一个文件，现在我们只要在标签里加入multiple属性就可以实现多文件上传。在html4里ajax是没有办法做上传文件操作，因此我们如果想实现ajax文件上传就不得不使用hack技术，模拟文件上传，这个我曾在博客里分享过我写的模拟多文件上传的demo，当时也是没法子要保证浏览器兼容性，不得不hack一把了。

　　在html5里我们对文件上传的控制力变得更强了，今天只展示一个简单文件上传操作的API，今后我会写一个复杂的多文件上传的demo和大家一起分享下，我们先看下面这个例子：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>多文件上传</title>
</head>
<body><inputtype="file"multiple id="fileIpt"size="120"/><br/><buttononclick="test()">点击测试</button>
</body>
</html>
<scripttype="text/javascript">functiontest(){varf=document.getElementById("fileIpt");varsFileList= "";for(vari= 0;i<f.files.length;i++){varitem=f.files[i];sFileList+= "文件名称：" +item.name+ "\n修改时间：" +item.lastModifiedDate+ "\n文件大小：" +item.size+ "\n文件类型:" +item.type+ "\n=================\n";}alert(sFileList);}</script>

　　在我做一个图片上传项目的时候，曾经有个想法就是想在图片客户端这里，也就是在文件传输到服务器之前给文件一个预览功能，当时我没时间仔细查阅资料，因此自己还是按照HTML4里掌握的知识认为浏览器在客户端是无法操作文件数据的，因此很难实现这个想法。最近看书发现原来HTML5已经可以做到这一点了，我写了一个例子和大家分享下：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>图片本地显示</title>
</head>
<body><inputtype="file"multiple id="fileIpt"size="120"/><br/><buttononclick="test()">显示图片</button><divid="result"></div>
</body>
</html>
<scripttype="text/javascript">functiontest(){varfiles=document.getElementById("fileIpt").files;for(vari= 0;i<files.length;i++){varf=files[i];if(f.type.indexOf("image")!= -1){varreader= newFileReader();reader.readAsDataURL(f);reader.onload= function(evt){varresDiv=document.getElementById("result");varoImg=document.createElement("img");oImg.setAttribute("src",this.result);oImg.setAttribute("width",300);oImg.setAttribute("height",300);resDiv.appendChild(oImg);}}}}</script>

　　好了，今天文章就写到这里，对于多文件上传我之后一定抽时间写个完整的例子出来，自己上次做项目对这块做的很是过瘾，而今天还发现了可以在客户端预览图片，因此这块很值得写个好demo了。

转载于:https://www.cnblogs.com/sharpxiajun/p/5554530.html

HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术相关推荐

  1. 阿里OSS对象存储，实现图片上传进度显示ProgressListener；

    想了解阿里OSS对象存储,实现图片上传的内容的可看我的另一篇博客,博客中有完整代码,这篇博客是以上一篇阿里OSS对象存储博客为基础,只写一些与进度有关的内容,细心往下看js代码中有需要注意的地方! 实 ...

  2. 微服务电商实战(十一)搭建vue项目对接注册登陆接口，解决跨域问题，使用七牛云实现头像上传

    一.简介 node.js版本:v12.16.3 node.js下载 vue官网教程 iview介绍 上传头像接口,图片存储在七牛云中,注册并实名认证之后可以免费使用 以下会描述使用vue搭建项目框架的 ...

  3. 阿里OSS对象存储，实现图片上传代码；

    一.注册阿里云账号,购买OSS服务 获取 : 连接区域地址endpoint :需要存储的bucketName:图片保存路径picLocation :连接keyId:accessKeyId :连接秘钥a ...

  4. 【vue.js】+云存储（实现图片上传功能）

    利用vue.js+element-ui实现云存储上传图片功能 文章目录 前言 一.对象存储 二.配置腾讯云Cos 1.引入库 第一步拥有腾讯云的开发者账号 实名认证 三.新建文件上传组件 新建上传图片 ...

  5. 微信小程序云开发之云存储（实现图片上传和下载）

    文章目录 前言 一.云存储的使用 二.使用演练 1.上传图片到云存储中 2.下载并保存图片到手机 前言 我们经常将文件(音频.图片.压缩包.文档)存储在网上,我们的云开发平台为开发者提供"云 ...

  6. HTML5项目笔记8：使用HTML5 的跨域通信机制进行数据同步

    离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统,并在网络畅通的情况下与服务器进行数据交互. 所以离线应用系统最终会做成类似C/S架构的客户端应用程序.这边基于Chrome或者 S ...

  7. html5跨域 postmessage,html5跨域通讯之postMessage的用法总结

    postMessagePortal.html 页面代码 复制代码代码如下: 标题 var targetOrigin = "http://22527.vhost20.boxcdn.cn&quo ...

  8. html5跨域通讯之postMessage的用法

    转自:http://www.cnblogs.com/wshiqtb/p/3171199.html postMessagePortal.html 页面代码 <!DOCTYPE html> & ...

  9. PHP-RSA加密跨域通讯实战

    PHP-RSA加密跨域通讯实战 AUTH:PHILO EMAIL:lijianying12 at gmail.com 基于POST GET 的http通讯虽然非常成熟,但是很容易被人监听. 并且如果使 ...

  10. html页面添加跨域,HTML5实现跨域问题

    (求索web开发:www.qiusuoweb.com)在之前写了两篇关于跨域获取接口数据问题的解决方案.本篇将为大家介绍HTML5是如何解决跨域这个问题的. 仅凭HTML5新特性的优势,比起之前两种的 ...

最新文章

  1. Spring事务失效的原因
  2. IBM认为将AI用于人力资源的价值
  3. hdfs数据均衡操作命令
  4. boost::container_hash模块实现哈希序列
  5. ci框架的session类，怎么使用ci的session类
  6. 一个写得很不错的vuex详解（转）
  7. Python学习笔记19（算法）
  8. ZOJ 1004 Anagrams by Stack（DFS+数据结构）
  9. Java加密与解密的艺术~DESede实现
  10. 抢鲜体验：openGauss从源码到主备
  11. 14. Element className 属性
  12. DemoKit编译过程错误
  13. Poker2  简单配置（方便于vim党）
  14. gradle启动项目编译报错：Executing task ‘clean‘...Task execution finished
  15. 【定义】三角形行列式和对角行列式
  16. 双碳背景下个人的低碳环保生活
  17. spring boot 项目重新搭建----------mvc配置：拦截器
  18. 京东区块链开源项目——JD Chain介绍及区块链白皮书发布
  19. linux中管道符“|”的作用
  20. commander.js使用及源码分析

热门文章

  1. Spring Boot 使用Dubbo 创建Hello Wrold
  2. HDU 5351 MZL's Border (规律，大数)
  3. ORCU浅析之安装和作用
  4. UGUI动态改变MatchWidthOrHeight
  5. 数据库设计 表和表之间的三种关系
  6. 分布式系统设计时，遵循CAP原则
  7. Linux系统编程 --- 系统调用
  8. php分页类 seo,哪种分页url对seo友好？
  9. mysql 10658_数据库mysql语句 - pymysql,sqlite3,MySQLdb,mysql.connector 第三方库常用sql语句...
  10. 【渝粤教育】国家开放大学2018年春季 0266-21T设计构成 参考试题