HTML5学习
HTML5 中的一些有趣的新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search
HTML5<!DOCTYPE>
:<!doctype>
声明必须位于 HTML5 文档中的第一行,使用:<!DOCTYPE html>
注意:对于中文网页需要使用<meta charset="utf-8">
声明编码,否则会出现乱码。
HTML5 浏览器支持
- 将 HTML5 元素定义为块元素
HTML5 定了 8 个新的 HTML 语义(semantic) 元素[header, section, footer, aside, nav, main, article, figure]。所有这些元素都是块级元素。为了能让旧版本的浏览器正确显示这些元素,可以设置 CSS 的 display 属性值为 block。 - 为 HTML 添加新元素:向 HTML 添加的新的元素,并为该元素定义样式,元素名为
<mine>
。
<script>
document.createElement("mine")
</script>
<style>
mine {
display: block;
}
</style>
<mine>自定义元素</mine>
- IE9 以下版本浏览器兼容HTML5的方法,使用本站的静态资源的html5shiv包:
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
html5shiv.js 引用代码必须放在<head>
元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
HTML5 Canvas
<canvas>
标签定义图形,比如图表和其他图像,canvas标签只是图形容器,必须使用脚本来绘制图形。
实例:
<canvas id="myCanvas" width="200" height="100"></canvas>
使用 JavaScript 来绘制图像
例子:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");(找到 <canvas> 元素)
var ctx=c.getContext("2d");(创建 context 对象--getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。)
ctx.fillStyle="#000000";(fillStyle属性可以是CSS颜色,渐变,或图案。)
ctx.fillRect(10,10,150,75);(fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。)
</script>
Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (10,10,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (10,10)。
Canvas - 路径
在Canvas上画线,我们将使用以下两种方法:
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
最后使用 stroke() 方法来绘制线条。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
在canvas中绘制圆形:使用arc(x,y,r,start,stop)
起始一条路径,或重置当前路径。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();(起始一条路径,或重置当前路径。)
ctx.arc(95,50,40,0*Math.PI,2*Math.PI);
ctx.stroke()/ctx.fill() ;
Canvas - 文本
使用 canvas 绘制文本,重要的属性和方法如下:
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变:
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1。
使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:drawImage(image,x,y)。
Canvas 参考手册:https://www.runoob.com/tags/ref-canvas.html
HTML5 内联 SVG
什么是SVG?
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
SVG 直接嵌入 HTML 页面:
绘制圆:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
SVG 参考手册:https://www.runoob.com/svg/svg-reference.html
HTML5 MathML
HTML5 可以在文档中使用 MathML 元素,对应的标签是<math xmlns="http://www.w3.org/1998/Math/MathML">...</math>
。
MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。
HTML5 拖放(Drag 和 Drop)
拖放:拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
- 设置元素为可拖放:把 draggable 属性设置为 true –
<img draggable="true">
- ondragstart 和 setData():规定当元素被拖动时,会发生什么。ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值:
<img id="drag" draggable="true" ondeagstart="drag(event)">
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
- 放到何处 - ondragover:此事件规定在何处放置被拖动的数据。默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
- 进行放置 - ondrop:当放置被拖数据时,会发生 drop 事件。ondrop 属性调用函数drop(event)
function drop(event)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");(获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。)
ev.target.appendChild(document.getElementById(data));
}
HTML5 Geolocation(地理定位)
用于定位用户的位置。
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
- HTML5 - 使用地理定位:使用 getCurrentPosition() 方法来获得用户的位置。
例子:
<p id="demo">点击按钮获取您当前坐标:</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="该浏览器不支持定位。";//innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
}
}
function showPosition(position)//获得并显示经度和纬度
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
</script>
- 在地图中显示结果:如果需在地图中显示结果,需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图。(静态图像)
<div id="mapholder"></div>
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
- getCurrentPosition() 方法 - 返回数据
属性 | 描述 |
---|---|
coords.latitude | 十进制数的纬度 |
coords.longitude | 十进制数的经度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米计 |
coords.altitudeAccuracy | 位置的海拔精度 |
coords.heading | 方向,从正北开始以度计 |
coords.speed | 速度,以米/每秒计 |
timestamp | 响应的日期/时间 |
- Geolocation 对象 - 其他方法:
- watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
- clearWatch() - 停止 watchPosition() 方法。
navigator.geolocation.watchPosition(showPosition);
HTML5 Video(视频)
大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<video>
元素提供了 播放、暂停和音量控件来控制视频。
<video> </video>
标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video>
元素支持多个 <source>
元素.<source>
元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
<video>
元素支持三种视频格式: MP4, WebM, 和 Ogg>。
HTML5<video>
- 使用 DOM 进行控制
HTML5 <video>
和<audio>
元素同样拥有方法、属性和事件。
<video>
和 <audio>
元素的方法、属性和事件可以使用JavaScript进行控制。
例子:
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
HTML5 Audio(音频)
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
- control 属性供添加播放、暂停和音量控件。
HTML 音频/视频 DOM 参考手册:https://www.runoob.com/tags/ref-av-dom.html
HTML5 新的 Input 类型
-
Input 类型: color用于选取颜色----
<input type="color" name="">
-
Input 类型: date从一个日期选择器选择一个日期----
<input type="date" name="">
-
Input 类型: datetime允许选择一个日期(UTC 时间)----
<input type="datetime">
-
Input 类型: datetime-local允许选择一个日期和时间----input type=“datetime-local”
-
Input 类型: email包含 e-mail 地址的输入域----input type=“email”
-
Input 类型: month允许你选择一个月份----input type=“month”
-
Input 类型: number于应该包含数值的输入域,还能够设定对所接受的数字的限定。----input type=“number” name=“quantity” min=“1” max=“5”
-
Input 类型: range用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条。----input type=“range”
- max - 规定允许的最大值
- min - 规定允许的最小值
- step - 规定合法的数字间隔
- value - 规定默认值
-
Input 类型: search用于搜索域,比如站点搜索或 Google 搜索。
-
Input 类型: tel定义输入电话号码字段。
-
Input 类型: time类型允许选择一个时间。
-
Input 类型: url类型用于应该包含 URL 地址的输入域,在提交表单时,会自动验证 url 域的值。
-
Input 类型: week类型允许选择周和年。
HTML5 表单元素
新的表单元素:
<datalist>
<keygen>
<output>
HTML5<datalist>
元素
<datalist>
元素规定输入域的选项列表。
<datalist>
属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
使用<input>
元素的列表属性与 <datalist>
元素绑定.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
HTML5<keygen>
元素
<keygen>
元素的作用是提供一种验证用户的可靠方法。
<keygen>
标签规定用于表单的密钥对生成器字段。
当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
</form>
HTML5<output>
元素
用于不同类型的输出,比如计算或脚本输出。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
HTML5 表单属性(部分)
<form> / <input>
autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能(记录)。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。
提示: autocomplete 适用于 form 标签,以及以下类型的 input 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
<form>
novalidate 属性
novalidate 属性是一个 boolean(布尔) 属性。
novalidate 属性规定在提交表单时无需验证 form 或 input 域。
<form action="" novalidate>
<input>
autofocus 属性
autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时,域自动地获得焦点。
<input type="text" name="" autofocus>
<input>
form 属性
规定输入域所属的一个或多个表单。
<form action="" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1">
Last name依然属于form。
<input>
list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
<input>
height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
<input>
min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
<input>
multiple 属性
multiple 属性是一个 boolean 属性.
multiple 属性规定input元素中可选择多个值。
<input>
placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
<input>
required 属性
required 属性是一个 boolean 属性。
required 属性规定必须在提交之前填写输入域(不能为空)。
<input>
step 属性
step 属性为输入域规定合法的数字间隔。
如果 step=“3”,则合法的数是 -3,0,3,6 等。
HTML5 语义元素(都是块元素(除了figcaption))
语义= 意义
语义元素 = 有意义的元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
<header>
:描述了文档的头部区域,主要用于定义内容的介绍展示区域。<nav>
:标签定义导航链接的部分。<section>
:标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,包含了一组内容及其标题。<article>
:标签定义独立的内容。(使用实例:Forum post/Blog post/News story/Comment)<aside>
:标签定义页面主区域内容之外的内容(比如侧边栏)。<figcaption>
:标签定义 figure元素的标题,应该被置于 “figure” 元素的第一个或最后一个子元素的位置。<figure>
:标签规定独立的流内容(图像、图表、照片、代码等等)内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。<footer>
:描述了文档的底部区域,一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等。
HTML5 Web 存储
使用HTML5可以在本地存储用户的浏览数据,数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
localStorage 和 sessionStorage
客户端存储数据的两个对象为:
- localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
- 保存数据:localStorage.setItem(key,value);
- 读取数据:localStorage.getItem(key);
- 删除单个数据:localStorage.removeItem(key);
- 删除所有数据:localStorage.clear();
- 得到某个索引的key:localStorage.key(index);
HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
以下是规范中定义的三个核心方法:
-
openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase() 方法对应的五个参数说明:- 数据库名称
- 版本号
- 描述文本
- 数据库大小
- 创建回调
第五个参数,创建回调会在创建数据库后被调用。
-
transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
-
executeSql:这个方法用于执行实际的 SQL 查询。
执行查询操作
执行操作使用 database.transaction() 函数:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
执行后会在 ‘mydb’ 数据库中创建一个名为 LOGS 的表。
插入数据
在执行上面的创建表语句后,可以插入一些数据:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "HTML5")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.baidu.com")');
});
我们也可以使用动态值来插入数据:
tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
e_id 和 e_log 是外部变量,executeSql 会映射数组参数中的每个条目给 “?”。
读取数据
读取数据库中已经存在的数据:
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
删除记录
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});
删除指定的数据id也可以是动态的:
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
更新记录
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
动态:
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
HTML5 应用程序缓存(Application Cache)
HTML5 引入了应用程序缓存,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
Cache Manifest 基础
如需启用应用程序缓存,在文档的html标签中包含 manifest 属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:".appcache"。
manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置。
创建Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
完整的 Manifest 文件:
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
(上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。)
NETWORK:
login.php
(规定文件 "login.php" 永远不会被缓存,且离线时是不可用的;可以使用星号来指示所有其他资源/文件都需要因特网连接:NETWORK:*)
FALLBACK:
/html/ /offline.html
(规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件,第一个 URI 是资源,第二个是替补。)
以 “#” 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
HTML5 Web Workers
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
实例:
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined")//检测用户的浏览器是否支持web worker
{
if(typeof(w) == "undefined")//否存在 worker,如果不存在,会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码
{
w = new Worker("demo_workers.js");
}
w.onmessage = function(event)//onmessage" 事件监听器 {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();//终止 web worker,并释放浏览器/计算机资源
w = undefined;
}
</script>
demo_workers.js://在一个外部 JavaScript 中创建 web worker 文件
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);//它用于向 HTML 页面传回一段消息
setTimeout("timedCount()",500);
}
timedCount();
web worker 通常用于更耗费 CPU 资源的任务。
由于 web worker 位于外部文件中,它们无法访问以下 JavaScript 对象:window 对象,document 对象,parent 对象。
HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新,单向消息传递。
Server-Sent 事件指的是网页自动获取来自服务器的更新。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
var source=new EventSource("demo_sse.php");//创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
source.onmessage=function(event)//每接收到一次更新,就会发生 onmessage 事件
{
document.getElementById("result").innerHTML+=event.data + "<br>";//当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
};
检测 Server-Sent 事件支持
if(typeof(EventSource)!=="undefined")
{
// 浏览器支持 Server-Sent
// 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}
服务器端代码
为了让上面的例子可以运行,还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
服务器端事件流的语法是把 “Content-Type” 报头设置为 “text/event-stream”。
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');//规定不对页面进行缓存
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())//输出发送日期(始终以 "data: " 开头)
Response.Flush()//向网页刷新输出数据
%>
把已接收的数据推入 id 为 "result" 的元素中
};
检测 Server-Sent 事件支持
if(typeof(EventSource)!=="undefined")
{
// 浏览器支持 Server-Sent
// 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}
服务器端代码
为了让上面的例子可以运行,还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
服务器端事件流的语法是把 “Content-Type” 报头设置为 “text/event-stream”。
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');//规定不对页面进行缓存
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())//输出发送日期(始终以 "data: " 开头)
Response.Flush()//向网页刷新输出数据
%>
写在最后
因为HTML5中有很多后面的只是,所以对一些内容只是了解,有一个大概的印象,后面学习过程中再加深应用。