H5详解

青春..荒唐

浏览: 972622 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

HTML

（1）简介

HTML5 是最新的 HTML 标准，拥有新的语义、图形以及多媒体元素

【优势】

①提供的新元素和新的 API 简化了 web 应用程序的搭建；

②跨平台，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行

【注意】

①H5默认的字符编码是UTF-8；

【新特性】

HTML5 的一些最有趣的新特性：

①新的语义元素，比如 <header>, <footer>, <article>, and <section>；

②新的表单控件，比如数字、日期、时间、日历和滑块；

③强大的图像支持（借由 <canvas> 和 <svg>）；

④强大的多媒体支持（借由 <video> 和 <audio>）；

⑤强大的新 API，比如用本地存储取代 cookie

【H5被删元素】

以下 HTML 4.01 元素已从 HTML5 中删除：

（2）浏览器支持

【浏览器支持】

所有现代浏览器都支持 HTML5。此外，所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。正因如此，可以帮助老式浏览器处理”未知的“ HTML 元素

【把 HTML5 元素定义为块级元素】

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。

可以把 CSS display 属性设置为 block，以确保老式浏览器中正确的行为：

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

【向 HTML 添加新元素】

可以通过浏览器 trick 向 HTML 添加任何新元素：

本例向 HTML 添加了一个名为 <myHero> 的新元素，并为其定义 display 样式：

<script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>

兼容：已添加的 JavaScript 语句 document.createElement("myHero")，仅适用于 IE

【Internet Explorer 的问题】

上述方案可用于所有新的 HTML5 元素，但是：

注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。

幸运的是，Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript", "the shiv"：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上代码是一段注释，但是 IE9 的早期版本会读取它（并理解它）

【完整的 Shiv 解决方案】

引用 shiv 代码的链接必须位于 <head> 元素中，因为 Internet Explorer 需要在读取之前认识所有新元素

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>My First Article</h1>
<article>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</article>
</body>
</html>

（2）H5语义元素：

【什么是语义元素？】

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。

语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。

【H5新的语义元素】

H5 提供了定义页面不同部分的新语义元素：

<article>定义文章，<aside>定义页面内容以外的内容，<details>定义用户能够查看或隐藏的额外细节，<figcaption>定义 <figure> 元素的标题，<figure>规定自包含内容，比如图示、图表、照片、代码清单，<footer>定义文档或节的页脚，<header>规定文档或节的页眉，<main>规定文档的主内容，

<mark>定义重要的或强调的文本，<nav>定义导航链接，<section>定义文档中的节，

<summary>定义 <details> 元素的可见标题，<time>定义日期/时间

（3）H5迁移：

从 HTML4 迁移至 HTML5，可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 HTML5。

<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div id="post">	<article>
<div id="footer">	<footer>

①【修改文档类型】

从 HTML4 doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

修改为 HTML5 doctype：

<!DOCTYPE html>

②【修改H5编码字符】

修改编码信息，从 HTML4：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

改为 HTML5：

<meta charset="utf-8">

③添加 shiv

所有现代浏览器都支持 HTML5 语义元素。

此外，您可以“教授”老式浏览器如何处理“未知元素”。

为 Internet Explorer 支持而添加的 shiv：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

④把 id="header" 和 id="footer" 的 <div> 元素更改为 HTML5 <header> 和 <footer>

⑤把 id="menu" 的 <div> 元素更改为 HTML5 <nav>

⑥把 id="content" 的 the <div> 元素更改为 HTML5 <section>

⑦把 class="post" 的所有 <div> 元素更改为 HTML5 <article>

【拓展】

Html5shiv，指的是Html5标签结构

【由来】

越来越多的站点开始使用 HTML5 标签。但情况是还有很多人在使用IE6，IE7，IE8。为了让所有网站浏览者都能正常的访问网站，从而使用Javascript来使不支持HTML5的浏览器支持HTML标签。很多网站采用的这种方式。

【解决方案】

有下面两个：

①为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，比如优酷网就是采用的这种模式；

②使用Javascript来使不支持HTML5的浏览器支持HTML标签，很多网站采用的这种方式。

html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：

<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

（4）H5代码规范

①【必需的属性】

请始终对图像使用 alt 属性。当图像无法显示时该属性很重要

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

②【避免长代码行】

当使用 HTML 编辑器时，通过左右滚动来阅读 HTML 代码很不方便。

请尽量避免代码行超过 80 个字符

③【不推荐省略 <html> 和 <body> 标签】

对于可访问应用程序（屏幕阅读器）和搜索引擎，声明语言很重要

省略 <html> 或 <body> c可令 DOM 和 XML 软件崩溃；省略 <body> 会在老式浏览器（IE9）中产生错误

④【HTML 注释】

短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 <!-- 之前增加一个空格：

<!-- This is a comment -->

长注释，跨越多行，应该通过  在独立的行中书写：

<!-- 
  This is a long comment example. This is a long comment example. 
  This is a long comment example.
  This is a long comment example. This is a long comment example. 
  This is a long comment example.
-->

长注释更易观察，如果它们被缩进两个空格的话

⑤【使用小写文件名】

一 . 大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

不能以 london.jpg 访问 London.jpg

二 . 其他 web 服务器（微软，IIS）对大小写不敏感：

能够以 london.jpg 或 London.jpg 访问 London.jpg

如果从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏网站

为了避免这些问题，请始终使用小写文件名（如果可以的话）

关于文件名小写，网上有许多说法，具体查询后总结如下：

①可移植性：使用小写文件名Linux 系统是大小写敏感的，而 Windows 系统和 Mac 系统正好相反，大小写不敏感。一般来说，这不是大问题。但是，如果两个文件名只有大小写不同，其他都相同，跨平台就会出问题

②易读性：小写文件名通常比大写文件名更易读，比如accessibility.txt比ACCESSIBILITY.TXT易读

③易用性：某些系统会生成一些预置的用户目录，采用首字母大写的目录名。比如，Ubuntu 在用户主目录会默认生成Downloads、 Pictures、Documents等目录。所以，用户的文件都采用小写文件名，就很方便与上面这些目录或文件相区分。

为什么操作系统会采用这样的大写文件名？

原因也很简单，因为早期 Unix 系统上，ls命令先列出大写字母，再列出小写字母，大写的路径会排在前面。因此，如果目录名或文件名是大写的，就比较容易被用户首先看到

（5）H5图形

一 . 画布canvas，我在之前文章里做了总结

二 . SVG

H5 支持内联 SVG，SVG 指可伸缩矢量图形，定义用于网络的基于矢量的图形，在放大或改变尺寸的情况下其图形质量不会有损失

具体我在后面文章http://570109268.iteye.com/blog/2409710里做了总结

（6）HTML多媒体

Web 上的多媒体指的是音效、音乐、视频和动画

【什么是多媒体？】

多媒体来自多种不同的格式，它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。在因特网上，经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。接下来介绍不同的多媒体格式，以及如何在您的网页中使用它们

【浏览器支持】

第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入

不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件

【多媒体格式】

多媒体元素（比如视频和音频）存储于媒体文件中

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4

【HTML插件】

辅助应用程序也称为插件，可用于播放音频和视频（以及其他）

辅助程序是使用 <object> 标签来加载的

使用辅助程序播放视频和音频的一个优势：允许用户来控制部分或全部播放设置，大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制

一 . HTML 音频

①问题及解决方案：

在 HTML 中播放音频并不容易，需要谙熟大量技巧，以确保音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放

②使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序

插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等

可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面

这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示

【HTML 4.01 多媒体标签】

标签描述

<applet>	不赞成。定义内嵌 applet。
<embed>	HTML4 中不赞成，HTML5 中允许。定义内嵌对象。
<object>	定义内嵌对象。
<param>	定义对象的参数。

【HTML 5 多媒体标签】

标签描述

<audio>	标签定义声音，比如音乐或其他音频流。
<embed>	标签定义嵌入的内容，比如插件。

【插入音频】

1 . <embed> 元素

<embed height="100" width="100" src="http://www.w3school.com.cn/i/horse.mp3"></embed>
<p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p>

问题：

①<embed> 标签在 HTML 4 中是无效的，页面无法通过 HTML 4 验证；

②不同的浏览器对音频格式的支持也不同；

③如果浏览器不支持该文件格式，没有插件的话就无法播放该音频；如果用户未安装插件，无法播放音频；

④如果把该文件转换为其他格式，仍然无法在所有浏览器中播放

【注释】：使用 <!DOCTYPE html> (HTML5) 解决验证问题

2 . <object> 元素

<object height="100" width="100" data="song.mp3"></object>

问题与<embed>标签相同

3 . <audio> 元素

HTML5 元素，但在 HTML 4 中是非法的，但在所有浏览器中都有效

<audio controls="controls">
  <source src="http://www.w3school.com.cn/song.mp3" type="audio/mp3" />
  <source src="http://www.w3school.com.cn/song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的

为了使音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息

问题：

①<audio> 标签在 HTML 4 中是无效的，页面无法通过 HTML 4 验证；

②必须把音频文件转换为不同的格式；

③<audio> 元素在老式浏览器中不起作用

【注释】：使用 <!DOCTYPE html> (HTML5) 解决验证问题

4 . 添加音频的最简单方法

使用雅虎媒体播放器是一个不同的途径，只需简单地让雅虎来完成歌曲播放的工作就好了

它能播放 mp3 以及一系列其他格式，通过一行简单的代码，就可以把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表

【雅虎媒体播放器】

<a href="http://www.w3school.com.cn/song.mp3">Play Sound</a>
<!--使用雅虎播放器是免费的，如需使用它，需要把这段JS插入网页底部-->
<!--然后只需简单地把 MP3 文件链接到HTML中，JS会自动地为每首歌创建播放按钮-->
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

雅虎媒体播放器为用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当点击该按钮时，会弹出完整的播放器。

注意：这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出

5 . 使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件：

<a href="http://www.w3school.com.cn/song.mp3">Play the sound</a>

二 . HTML视频

在 HTML 中播放视频的方法有很多种，但并不容易。需要谙熟大量技巧，以确保视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

1. <embed> 标签

<embed width="320" height="240" src="http://www.w3school.com.cn/i/bookmark.swf" />

2. <object> 标签

<object data="http://www.w3school.com.cn/movie.swf" height="200" width="200"/>

【问题】

①如果浏览器不支持 Flash，将无法播放视频；

②iPad 和 iPhone 不能显示 Flash 视频；

③如果将视频转换为其他格式，那么它仍然不能在所有浏览器中播放

3 .<video> 标签

HTML 5 中的新标签，作用是在 HTML 页面中嵌入视频元素

以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

<video width="320" height="240" controls="controls">
  <source src="http://www.w3school.com.cn/movie.mp4" type="video/mp4" />
  <source src="http://www.w3school.com.cn/movie.ogg" type="video/ogg" />
  <source src="http://www.w3school.com.cn/movie.webm" type="video/webm" />
Your browser does not support the video tag.（浏览器不支持）
</video>

【问题】

①必须把视频转换为很多不同的格式；

②<video> 元素在老式浏览器中无效；

③<video> 元素无法通过 HTML 4 和 XHTML 验证

4.HTML 添加视频最好方法

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

【问题】

①必须把视频转换为很多不同的格式

②<video> 元素无法通过 HTML 4 和 XHTML 验证；

③<embed> 元素无法通过 HTML 4 和 XHTML 验证

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题

5 . 优酷解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站

如果希望在网页播放视频，可以把视频上传到优酷视频网站，然后在网页中插入 HTML 代码即可播放视频：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

6 . 使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player（Windows媒体播放器）来播放这个 AVI 文件：

<a href="http://www.w3school.com.cn/movie.swf">Play a video file</a>

（7）H5的API

①地理位置

HTML5 Geolocation（地理位置）API 用于获得用户的地理位置

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的

【兼容】

IE9、Firefox、Chrome、Safari 以及 Opera 支持地理定位

注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确

使用 getCurrentPosition() 方法来获得用户的位置，下例是一个简单的地理定位实例，可返回用户位置的经度和纬度

②拖放

拖放（Drag 和 Drop）是很常见的特性，它指的是您抓取某物并拖入不同的位置

拖放是 HTML5 标准的组成部分：任何元素都是可拖放的

具体我在前面文章http://570109268.iteye.com/admin/blogs/2408954里做过总结

（8）H5本地存储

具体我在后面文章http://570109268.iteye.com/admin/blogs/2409845里做了总结

HTML5本地存储：优于 cookies

【什么是 HTML 本地存储？】

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

【HTML 本地存储对象】

HTML 本地存储提供了两个在客户端存储数据的对象：

① window.localStorage - 存储没有截止日期的数据

② window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
    alert("支持H5本地缓存")
} else {
    // 抱歉！不支持 Web Storage ..
    alert("不支持H5本地缓存")
}

（9）H5应用程序缓存

使用应用程序缓存，通过创建 cache manifest（缓存清单）文件，可轻松创建 web 应用的离线版本

①【什么是应用程序缓存？】

HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。

通俗理解就是离线缓存，可在无网络状态下访问

②【优势】

应用程序缓存为应用带来三个优势：

1.离线浏览 - 用户可在应用离线时使用它们；

2.速度 - 已缓存资源加载得更快；

3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

③【兼容】

IE10及其他主流浏览器均支持

④【Cache Manifest （缓存清单）基础】

如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）

manifest 文件的建议文件扩展名是：".appcache"

【注意：】manifest 文件需要设置正确的MIME-type，即text/cache-manifest，必须在web服务器上进行配置

⑤【Manifest（清单）文件】

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

由三部分组成：

1 . CACHE MANIFEST（缓存清单） - 在此标题下列出的文件将在首次下载后进行缓存

2 . NETWORK （网络）- 在此标题下列出的文件需要与服务器的连接，且不会被缓存

3 . FALLBACK （回退）- 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

下面分开讲解：

1 . CACHE MANIFEST（缓存清单）

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件

当 manifest 文件被加载后，浏览器会从网站的根目录下载这三个文件；然后，无论用户何时与因特网断开连接，这些资源依然可用

2 . NETWORK（网络）

下面的 NETWORK 部分规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

可以使用星号来指示所有其他其他资源/文件都需要因特网连接：

NETWORK:
*

3 . FALLBACK（回退）

规定如果无法建立因特网连接，则用 "offline.html" 替代 /html/ 目录中的所有文件：

FALLBACK:
/html/ /offline.html

注释：第一个 URI 是资源，第二个是替补

⑥ 【更新缓存】

一旦应用被缓存，它就会保持缓存直到发生下列情况：

1 . 用户清空浏览器缓存；

2 . manifest 文件被修改（参阅下面的提示）；

3 . 由程序来更新应用缓存

更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件

注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）

⑦【完整的 Cache Manifest 文件】

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

【提示：】

1 . 以 "#" 开头的是注释行，但也可满足其他用途

2 . 应用的缓存只会在其 manifest 文件改变时被更新

3 . 如果编辑了一幅图像，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存

4 . 更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

（10）Web Workers

Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

【什么是 Web Worker？】

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

【兼容】

IE10及其他主流浏览器均兼容

【检测 Web Worker 支持】

在创建 web worker 之前，请检测用户浏览器是否支持它：

<script>
    window.onload = function demo(){
        if (typeof(Worker) !== "undefined") {
            alert("支持Web worker")
        } else {
            alert("不支持Web Worker！")
        }
    }
</script>

【创建 Web Worker 文件】

现在，先在一个外部 JavaScript 文件中创建web worker

在此处，我们创建了计数脚本，该脚本存储于 "demo_workers.js" 文件中：

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    //console.log(documnet);因为是外部JS，所以无法获取文档相关属性
    setTimeout("timedCount()",500);
}
timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息

注释: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务

【创建 Web Worker 对象】

现在已经有了 web worker 文件，需要从 HTML 页面调用它

下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

然后我们就可以从 web worker 发生和接收消息了

向 web worker 添加一个 "onmessage" 事件监听器：

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

当 web worker 传送消息时，会执行事件监听器中的代码；来自 web worker 的数据会存储于 event.data 中

【终止 Web Worker】

当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

【复用 Web Worker】

如果把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：

w = undefined;

【总结】

Web Worker 和 DOM，由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象，document 对象，parent 对象

（11）H5的SSE

HTML Server-Sent（服务器）事件

【检测 Server-Sent 事件支持】

以下编写了一段额外的代码来检测服务器发送事件的浏览器支持：

if(typeof(EventSource) !== "undefined") {
    // 是的！支持服务器发送事件！
    // 一些代码.....
} else {
    // 抱歉！不支持服务器发送事件！
}

【EventSource 对象】

我们可以使用 onmessage 事件来获取消息，不过还可以使用其他事件：

事件描述

onopen 当通往服务器的连接被打开

onmessage 当接收到消息

onerror 当发生错误

分享到：

SVG详解 | XML笔录

2018-01-30 18:18
浏览 1117
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

H5详解

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

H5详解

评论

发表评论

相关推荐

浅谈锚点跳转优先级

浅谈HTML空标签

浅谈空标签对伪元素的支持

浅谈HTML空标签

HTML中form表单作用解释

table表格标签总结

html链接中的相对路径和绝对路径

Unicode编码详解

H5本地存储

XML笔录

SVG详解

HTML文本格式化

URL与URI区别

HTTP方法与协议

HTTP请求与状态码

URL编码来源及详解

HTML字符集

HTML 颜色代码理论

HTML文档类型

H5视频音频

最近访客更多访客>>