HTML5 可用的 API

2025年3月17日 | 阅读 8 分钟

引言

API 的全称是应用程序编程接口。API 是一组预先构建好的程序，可以通过 JavaScript 来使用。借助 API，我们可以实现已编写好的代码来满足您正在进行的项目需求。

现在，我们将讨论 HTML5 提供的一些有用且流行的 API。

让我们看一段 JavaScript 代码

var count = 0;
function countFunction() {
               count += 1;
               postMessage("Welcome to JavaTpoint! (" + count + ")");
               setTimeout("countFunction()", 1000);
}

countFunction();

HTML Geolocation API

借助地理位置 API，我们可以获取用户或页面访问者的当前位置。此外，借助此 API，我们只能在用户允许的情况下查看用户的位置，因为它会损害用户的安全和隐私。

语法

地理位置 API 中可用的方法

地理位置 API 中有很多方法。它们如下。

1. getCurrentPosition() 方法

此方法帮助我们获取具有纬度、经度、精度和海拔等属性的对象。

2. watchPosition() 方法

借助此方法，我们可以获取用户的当前位置，以及当用户位置发生变化或用户从一个位置移动到另一个位置时更新的位置。

3. clearWatch() 方法

借助此方法，我们可以停止 watchPosition() 方法继续跟踪用户。

示例 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Geolocation API</title>
  <style>
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>Hey JTP Lover,</h1>
    <h3>Welcome to JavaTpoint!</h3>
    <button type="button" onclick="geoLoc()">
      Get Location
    </button>
  </div>
  <script>
    var container = document.getElementById("container");
    var pos = navigator.geolocation;
     
    function geoLoc() {
      if (pos)
        pos.getCurrentPosition(getLoc);
      else
        container.innerHTML = "Your browser does "
          + "not support the Geolocation API.";
    }

    function getLoc(loc) {
      container.innerHTML = "Latitude: " 
        + loc.coords.latitude +
        "<br>Longitude: " + 
        loc.coords.longitude;
    }
  </script>
</body>
</html>

输出

当用户点击“获取位置”按钮时，我们会得到以下输出。

说明

在上面的代码中，我们实现了逻辑，以便获取用户的当前纬度和经度。

HTML Drag and Drop API

这是当今最常见的功能。借助此功能，我们可以将一个项目从一个地方拖动到另一个地方。

语法

借助以下语法，我们可以使元素具有拖动性，如下所示：

<div draggable="true">
    //content of the element
</div>

让我们看一个例子并正确理解它。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Geolocation API</title>
  <style>
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #drop {
      height: 105px;
      width: 105px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>Hey JTP Lover,</h1>
    <h3>Welcome to javaTpoint!</h3>
     

<p>Drag image into the container</p>


    <div id="drop" ondrop="dropItem(event)"
      ondragover="droppable(event)"></div>

    <img src=
"./JTP logo.png"
      alt="javaTpoint" id="image"
      draggable="true" ondragstart="dragItem(event)"
      height="100px" width="100px">
  </div>

  <script>
    function droppable(e) {
      e.preventDefault();
    }

    function dragItem(e) {
      e.dataTransfer.setData("text", e.target.id);
    }

    function dropItem(e) {
      e.preventDefault();
      var content = e.dataTransfer.getData("text");
      e.target.appendChild(document.getElementById(content));
    }
  </script>
</body>
</html>

输出

拖动图片后，我们可以得到以下输出

HTML Web Storage API

借助 HTML Web Storage API，我们可以将数据存储在 Web 浏览器中。在早期，我们可以将数据以 Cookie 的形式存储，Cookie 可以存储少量数据，并且不能进一步传输到服务器。但当 HTML 5 出现时，借助 HTML Web Storage API，我们可以存储比 Cookie 大量的数据并将其传输到服务器。使用此 API 存储数据比使用 Cookie 更安全。

HTML Web Storage API 中有两个对象。它们如下：

1. sessionStorage

借助此对象，我们可以临时在 Web 浏览器中存储数据，这样如果浏览器刷新或关闭，存储的数据就会丢失。

2. localStorage

借助此对象，我们可以将数据永久存储在浏览器中，没有过期时间，这样即使浏览器刷新也不会丢失。

让我们通过一个例子来理解这一点。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #btnDiv {
      width: 20vw;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
    }

    .btn {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>Hey JTP Lovers,</h1>
    <h2 id="heading"></h2>
    <h3 id="desc"></h3>
    <div id="btnDiv">
      <button class="btn" onclick="getContent()">
        Get stored Data
      </button>
       
      <button class="btn" onclick="remContent()">
        Remove stored Data
      </button>
    </div>
  </div>
  <script>
    var head = document.getElementById('heading');
    var desc = document.getElementById("desc");
    function getContent() {
      if (typeof (Storage) !== "undefined") {

        // setItem() will set store the passed attribute
        // and value in localStorage
        localStorage.setItem('heading', 'Welcome to JavaTpoint!');
        localStorage.setItem('description',
          'A computer science portal for JTP Lovers.');
         
        // This is the way of accessing the items 
        // stored in the storage 
        head.innerText = localStorage.heading;
        desc.innerText = localStorage.description;
      }
      else {
        head.innerText = 
          "Your browser does not support web storage API.";
      }
    }

    function remContent() {

      // removeItem() will remove the passed attribute
      // and value from localStorage.
      localStorage.removeItem('heading');
      localStorage.removeItem('description');
      head.innerText = localStorage.heading;
      desc.innerText = localStorage.description;
    }
  </script>
</body>
</html>

输出

当我们点击“获取已存储数据”时，消息将根据以下输出显示。

当我们点击“删除已存储数据”时，消息将根据以下输出被删除。

HTML Web Worker API

当我们尝试上传页面时，页面会卡住直到上传完成。但借助 Web Worker API，我们可以上传 JavaScript 而不影响页面性能。它有助于在不影响其他脚本的情况下在后台运行 JavaScript。

让我们通过一个例子来理解这一点。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #btnDiv {
      width: 20vw;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
    }

    .btn {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>Hey JTP Lovers,</h1>
    <h2 id="heading"></h2>
    <div id="btnDiv">
      <button class="btn" onclick="getJS()">
        Start executing JS
      </button>
      <button class="btn" onclick="remJS()">
        Stop executing JS
      </button>
    </div>
  </div>
  <script>
    var myWorker;
    var head = document.getElementById('heading');
    function getJS() {

      // Below condition will check for
      // the browser support.
      if (typeof (Worker) !== "undefined") {
         
        // The condition below will check for
        // existence of the worker
        if (typeof (myWorker) == "undefined") {
          myWorker = new Worker("myScript.js");
          // Above line Will create a worker that will 
          // execute the code of myscript.js file
        }

        // onmessage event triggers a function 
        // with the data stored in the external js file
        myWorker.onmessage = function (props) {
          head.innerText = props.data;
        }
      }
      else {
        head.innerText = 
          "Your browser does not support web storage API.";
      }
    }

    function remJS() {

      // Terminate() will terminate the current worker
      myWorker.terminate();
      myWorker = undefined;
    }
  </script>
</body>
</html>

输出

HTML5 中的基本 API

让我们看一些 HTML5 中提供的更多基本 API。

1. Ambient Light API

此 API 允许我们获取有关设备光传感器检测到的环境光水平的信息。

2. Battery Status API

借助此 API，我们可以获取有关设备电池状态的信息。

3. Canvas 2D Context

借助此 API，我们可以在浏览器中绘制和操作图形。

4. Clipboard API

此 API 允许我们访问操作系统的复制、剪切和粘贴功能。

5. Contacts

借助此 API，我们可以访问 Web 浏览器中的用户联系人存储库。

6. Drag and Drop

借助此 API，我们可以在浏览器窗口内部和之间拖放项目。

7. File API

借助此 API，我们可以为程序提供对设备文件系统的安全访问。

8. Forms

借助此 API，我们可以让程序访问 HTML5 中定义的新数据类型。

9. Fullscreen API

此 API 允许我们控制 Web 页面不带浏览器用户界面的全屏使用。

10. Gamepad API

借助此 API，我们可以提供对 USB 游戏手柄控制器的输入支持。

11. Geolocation

借助此 API，我们可以为 Web 应用程序提供对用户设备地理位置数据的访问。

12. getUserMedia/Stream API

此 API 允许我们访问外部设备数据（如摄像头视频）。

13. History API

借助此 API，我们可以让程序操作浏览器历史记录。

14. HTML Microdata

借助此 API，我们可以提供一种用计算机可读标签注释内容的方法。

15. Indexed database

借助此 API，我们可以在 Web 浏览器中创建一个简单的客户端数据库系统。

16. Internationalization API

借助此 API，我们可以提供对区域设置敏感的格式化和字符串比较的访问。

17. Offline apps

借助此 API，我们可以允许程序员在离线模式下使用 Web 应用程序。

18. Proximity API

借助此 API，我们可以提供有关设备与物体之间距离的信息。

19. Screen Orientation

借助此 API，我们可以读取屏幕方向状态（纵向或横向），并使程序员能够知道何时更改它并将其锁定。

20. Selection

借助此 API，我们可以使用 CSS 样式选择器在 JavaScript 中支持选择元素。

21. Server-sent events

借助此 API，我们可以允许服务器将数据推送到浏览器，而无需浏览器请求。

22. User Timing API

借助此 API，我们可以为程序员提供对高精度时间戳的访问，以衡量应用程序的性能。

23. Vibration API

借助此 API，我们可以访问设备的振动功能。

24. Web Audio API

借助此 API，我们可以使用 API 来处理和合成音频。

25. Web messaging

借助此 API，我们可以允许浏览器窗口在不同源之间进行通信。

26. Web Speech API

借助此 API，我们可以提供语音输入和文本转语音输出功能。

27. Web storage

借助此 API，我们可以允许在浏览器中存储键值对。

28. Web socket

借助此 API，我们可以打开浏览器和服务器之间的交互式通信会话。

29. Web Workers

借助此 API，我们可以允许 JavaScript 在后台执行脚本。

30. XMLHttpRequest2

借助此 API，我们可以改进 XMLHttpRequest，无需解决同源策略错误，并使 XMLHttpRequest 与 HTML5 的新功能协同工作。

下一主题HTML 标签周围的括号

HTML5 可用的 API

引言

HTML Geolocation API

语法

示例 1

HTML Drag and Drop API

语法

HTML 代码

HTML Web Storage API

HTML 代码

HTML Web Worker API

HTML 代码

HTML5 中的基本 API

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML5 可用的 API

引言

HTML Geolocation API

语法

示例 1

HTML Drag and Drop API

语法

HTML 代码

HTML Web Storage API

HTML 代码

HTML Web Worker API

HTML 代码

HTML5 中的基本 API

相关帖子

如何在 HTML 中添加 Logo

HTML 货币格式

HTML 结构

HTML 制表符空格

HTML 工具提示

HTML 与 HTML5

使用 Shunting yard 算法在 HTML 中使用 JavaScript 创建计算器

HTML 自定义属性

HTML 验证器

HTML 中的 body alink 属性

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器