H5新特性

最新推荐文章于 2024-07-22 21:44:46 发布

起伏羊

最新推荐文章于 2024-07-22 21:44:46 发布

阅读量510

点赞数

分类专栏： H5 文章标签： html5 web html

本文链接：https://blog.csdn.net/Sonnenlicht77/article/details/103899286

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5新特性

移除元素

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

H5的文档类型申明简化

<!DOCTYPE>

浏览器兼容情况

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法，在中引入下面代码：

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

语义元素

H5定义了8个语义元素，且都是块级元素。使用display:block;确保老式浏览器中正确的行为

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

可自行定义元素，例如：

<style>
    myblog{
        display:block;
    }
</style>
<myblog>
    loremloremloremloremloremlorem
</myblog>

H5新元素

标签定义图形，比如图表和其他图像。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。该标签基于 JavaScript 的绘图 API。

元素本身并没有绘制能力（它仅仅是图形的容器）

使用

1、创建<canvas>

<canvas id="canvas"></canvas>

2、Document.getElementById() 方法获取HTML <canvas> 元素的引用。

3、HTMLCanvasElement.getContext() 方法获取这个元素的context——图像稍后将在此被渲染。

4、CanvasRenderingContext2D 接口完成实际的绘制。

###### 更多canvas信息》》

HTML5 内联 SVG

H5支持内联svg

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Canvas VS SVG

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较，不同：

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

新多媒体元素

<audio>	
<!--定义音频内容。-->
<video>	
<!--定义视频（video 或者 movie）。-->
<source>
<!--定义多媒体资源 <video> 和 <audio>。-->
<embed>	
<!--定义嵌入的内容，比如插件。-->
<track>	
<!--为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。-->

demo

<!DOCTYPE html>
<html>
<body>
    <video width="320" height="240" controls="controls" autoplay="autoplay">
      <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
      <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
      <source src="https://www.w3school.com.cn/i/movie.webm" type="video/webm" />
      <object data="https://www.w3school.com.cn/i/movie.mp4" width="320" height="240">
        <embed width="320" height="240" src="https://www.w3school.com.cn/i/movie.swf" />
      </object>
    </video>
</body>
</html>

新表单元素

定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
元素规定输入域的选项列表。

属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用元素的列表属性与元素绑定.

demo

<form action="demo-form.php" method="get">
    <input list="browsers" name="browser">
        <datalist id="browsers">
          <option value="Internet Explorer">
          <option value="Firefox">
          <option value="Chrome">
          <option value="Opera">
          <option value="Safari">
        </datalist>
    <input type="submit">
</form>

规定用于表单的密钥对生成器字段。已弃用

定义不同类型的输出，比如脚本的输出。

<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>

H5表单属性

HTML5 的和标签添加了几个新属性.

新属性：

autocomplete
novalidate

新属性：

autocomplete
autofocus: 属性规定在页面加载时，域自动地获得焦点。
form:form 属性规定输入域所属的一个或多个表单。
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp):描述了一个正则表达式用于验证元素的值。用于以下类型的标签: text, search, url, tel, email, 和 password.
placeholder:placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

required
step

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

HTML5 MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是 … 。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

   <math xmlns="http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
				
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
				
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
			
      </math>

结果：a 2 + b 2 = c 2

HTML API

HTML5 地理位置

HTML5 Geolocation（地理定位）用于定位用户的位置。

定位用户的位置

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

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

HTML5 - 使用地理定位

使用 getCurrentPosition() 方法来获得用户的位置。

demo

<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
    var x=document.getElementById("demo");
    function getLocation(){
      if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showPosition);
        }
      else{
          x.innerHTML="Geolocation is not supported by this browser.";
          
      }
    }
    function showPosition(position){
      x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;	
    }
</script>

检测是否支持地理定位

如果支持，则运行 getCurrentPosition() 方法。
如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象。
showPosition() 函数获得并显示经度和纬度。

处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：

function showError(error){
    switch(error.code){
        case error.PERMISSION_DENIED:
          x.innerHTML="User denied the request for Geolocation."
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML="Location information is unavailable."
          break;
        case error.TIMEOUT:
          x.innerHTML="The request to get user location timed out."
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML="An unknown error occurred."
          break;
    }
}

错误代码：

Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时

在地图中显示结果

如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：

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+"'>";
}

给定位置的信息

更新本地信息
显示用户周围的兴趣点
交互式车载导航系统 (GPS)

getCurrentPosition() 方法 - 返回数据

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法。

<!DOCTYPE html>
<html>
<body>
    <p id="demo">点击这个按钮，获得您的坐标：</p>
    <button onclick="getLocation()">试一下</button>
    <script>
        var x=document.getElementById("demo");
            function getLocation(){
                if (navigator.geolocation){
                    navigator.geolocation.watchPosition(showPosition);
                }else{
                    x.innerHTML="Geolocation is not supported by this browser.";
                }
            }
            function showPosition(position){
                x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;	
            }
    </script>
</body>
</html>

HTML5 拖放

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

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

    <style type="text/css">
        #div1 {
            width: 198px;
            height: 66px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>

    <p>请把 W3School 的图片拖放到矩形中：</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img id="drag1" src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

把元素(demo中为img)设置为可拖放

首先：为了把一个元素设置为可拖放，请把 draggable 属性设置为 true：

draggable：true

拖放的内容 - ondragstart 和 setData()

然后，规定当元素被拖动时发生的事情。

在上面的例子中，ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。

dataTransfer.setData() 方法设置被拖动数据的数据类型和值：

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

拖到何处 - ondragover

ondragover 事件规定被拖动的数据能够被放置到何处。

默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。

这个任务由 ondragover 事件的 event.preventDefault() 方法完成：

    event.preventDefault()

进行放置 - ondrop

当放开被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

代码解释：

调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
被拖数据是被拖元素的 id (“drag1”)
把被拖元素追加到放置元素中

HTML5 Web存储

HTML5 web 存储,一个比cookie更好的本地存储方式。

什么是 HTML 本地存储？

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

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

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

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

HTML 本地存储对象

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

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

    if(typeof(Storage)!=="undefined"){
        // 是的! 支持 localStorage  sessionStorage 对象!
        // 一些代码.....
    } else {
        // 抱歉! 不支持 web 存储。
    }

localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

    // 存储
    localStorage.setItem("lastname", "Gates");
    // 取回
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");

实例解释：

创建 localStorage 名称/值对，其中：name=“lastname”，value=“Gates”
取回 “lastname” 的值，并把它插到 id=“result” 的元素中

上例也可这样写：

    // 存储
    localStorage.lastname = "Gates";
    // 取回
    document.getElementById("result").innerHTML = localStorage.lastname;

删除 “lastname” localStorage 项目的语法如下：

    localStorage.removeItem("lastname");

注释：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

下面的实例展示了用户点击按钮的次数。

代码中的字符串值转换为数字类型:

    function clickCounter() {
        if(typeof(Storage) !== "undefined") {
            if (localStorage.clickcount) {
                localStorage.clickcount = Number(localStorage.clickcount)+1;
            } else {
                localStorage.clickcount = 1;
            }
            document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";
        } else {
            document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
        }
    }

    <p><button onclick="clickCounter()" type="button">请点击这里！</button></p>
    <div id="result"></div>
    <p>请点击按钮使计数器递增。</p>
    <p>请关闭浏览器或标签页，然后再试一次，计数器将继续计数（不会重置）。</p>

sessionStorage 对象

sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。

上例计数，为例

    function clickCounter() {
        if(typeof(Storage) !== "undefined") {
            if (sessionStorage.clickcount) {
                sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
            } else {
                sessionStorage.clickcount = 1;
            }
            document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
        } else {
            document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
        }
    }

    <p><button onclick="clickCounter()" type="button">请点击这里</button></p>
    <div id="result"></div>
    <p>请点击按钮使计数器递增。</p>
    <p>请关闭浏览器或标签页，然后再试一次，计数器会重置。</p>

HTML5 Web SQL

HTML5 应用程序缓存

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

什么是应用程序缓存？

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

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

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

HTML Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

实例链接

部分代码

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

Cache Manifest 基础

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

    <html manifest="demo.appcache">
    ....
    </html>

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

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

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

Manifest 文件

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

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST

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

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

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

当 manifest 文件被加载后，浏览器会从网站的根目录下载这三个文件。

然后，无论用户何时与因特网断开连接，这些资源依然可用。

NETWORK

下面的 NETWORK 部分规定文件 “login.php”

永远不会被缓存，且离线时是不可用的：

    NETWORK:
    login.asp

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

    NETWORK:
    *
    
    FALLBACK

下面的 FALLBACK 部分规定如果无法建立因特网连接，则用 “offline.html” 替代 /html/ 目录中的所有文件：

    FALLBACK:
    /html/ /offline.html

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

更新缓存

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

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

实例 - 完整的 Manifest 文件

    CACHE MANIFEST
    # 2012-02-21 v1.0.0
    /theme.css
    /logo.gif
    /main.js
    
    NETWORK:
    login.asp
    
    FALLBACK:
    /html/ /offline.html

提示：以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

关于应用程序缓存的注意事项

请留心缓存的内容。

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

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

HTML5 Web Workers

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

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。
Web worker 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。

您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

检测 Web Worker 支持

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

    if (typeof(Worker) !== "undefined") {
        // 是的！支持 Web worker！
        // 一些代码.....
    } else {
        // 抱歉！不支持 Web Worker！
    }

创建 Web Worker 文件

现在，让我们在一个外部 JavaScript 文件中创建我们的 web worker。

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

    var i = 0;
    function timedCount() {
        i = i + 1;
        postMessage(i);
        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;

完整实例

    <!DOCTYPE html>
    <html>
    <body>
    
        <p>计数: <output id="result"></output></p>
        <button onclick="startWorker()">开始 Worker</button> 
        <button onclick="stopWorker()">停止 Worker</button>
        <br /><br />
        
        <script>
            var w;
            
            function startWorker(){
                if(typeof(Worker)!=="undefined"){
                    if(typeof(w)=="undefined"){
                        w=new Worker("../demo_workers.js");
                    }
                    w.onmessage = function (event) {
                        document.getElementById("result").innerHTML=event.data;
                    };
                }else{
                    document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
                }
            }
            
            function stopWorker(){ 
                w.terminate();
            }
        </script>
    </body>
    </html>

Web Worker 和 DOM

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

window 对象
document 对象
parent 对象

HTML5 SSE

HTML Server-Sent 事件

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。。

Server-Sent 事件 - One Way Messaging

Server-Sent 事件 - 单向消息传递

Server-Sent 事件指的是网页自动从服务器获得更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件，更新能够自动到达。

例如：Facebook/Twitter 更新、股价更新、新的博文、赛事结果，等等。

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知：

    var source = new EventSource("demo_sse.php");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML += event.data + "<br>";
    };

例子解释：

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 “demo_sse.php”）
每当接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 “result” 的元素中

检测 Server-Sent 事件支持

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

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

服务器端代码实例

为了使上例运行，您需要能够发送数据更新的服务器（比如 PHP 或 ASP）。

服务器端事件流的语法非常简单。请把 “Content-Type” 报头设置为 “text/event-stream”。现在，您可以开始发送事件流了。

PHP 中的代码 (demo_sse.php)：

    <?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: The server time is: " & now())
    Response.Flush()
    %>

代码解释：

把报头 “Content-Type” 设置为 “text/event-stream”
规定不对页面进行缓存
输出要发送的日期（始终以 "data: " 开头）
向网页刷新输出数据

EventSource 对象

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

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当发生错误

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。

轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

起伏羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5新特性

HTML5新特性移除元素<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike>H5的文档类型申明简化<!DOCT...
复制链接

扫一扫