浏览器原生的JavaScript API-汇总

admin管理员组

文章数量:1543845

目录

浏览器原生JavaScript API的例子

1. Document API：操作HTML文档的API。

2. Window API：操作浏览器窗口的API。

3. Navigator API：提供有关浏览器和操作系统的信息。

4. XMLHttpRequest API：发送HTTP请求的API。

5. Fetch API：使用更现代的方式发送HTTP请求和处理响应。

6. LocalStorage API：在浏览器中存储数据的API。

7. Geolocation API：访问设备的地理位置信息。

8. Canvas API：在网页上绘制图形的API。

9. MediaDevices API：访问媒体设备（如摄像头和麦克风）的API。

10. History API：操作浏览器历史记录的API。

11. History API：操作浏览器历史记录的API。

12. Web Storage API：在浏览器中存储数据的API。

13. Clipboard API：访问剪贴板的API。

14. Intersection Observer API：观察元素与其祖先或视口交叉的API。

15. Mutation Observer API：观察DOM更改的API。

16. Web Workers API：在后台运行脚本的API。

17. Performance API：访问性能测量数据的API。

18. WebRTC API：实现实时通信的API。

19. Notification API：显示浏览器通知的API。

20. Fullscreen API：控制全屏显示的API。

21. Geolocation API：用于获取设备的地理位置信息。

22. Web Workers API：在后台运行脚本的API。

23. Canvas API：用于在网页上绘制图形。

24. Drag and Drop API：用于实现元素的拖放功能。

25. Media Devices API：用于访问媒体设备（如摄像头和麦克风）的API。

26. Speech Recognition API：用于将语音转换为文本的API。

27. Battery Status API：用于获取设备电池信息的API。

28. File API：用于读取和处理本地文件的API。

29. Animation API：用于在浏览器中创建动画效果的API。

30. Speech Synthesis API：用于将文本转换为语音的API。

31. Page Visibility API：用于检测页面在浏览器中的可见性状态的API。

32. Payment Request API：用于在浏览器中简化支付流程的API。

33. Beacon API：用于在浏览器后台发送数据的API。

34. Presentation API：用于在外部显示器或投影设备上显示内容的API。

35. Gamepad API：用于访问和控制游戏手柄和游戏pad的API。

36. Payment Handler API：用于处理Web支付的API。

37. Shape Detection API：用于检测和识别图片和视频中的形状的API。

38. WebRTC API：用于实时通信的API，可以在浏览器之间传输音频、视频和数据。

39. Web Speech API：用于语音识别和语音合成的API。

40. Intersection Observer API：用于观察元素是否进入或离开浏览器的可视区域。

41. Web Bluetooth API：用于与蓝牙设备通信的API。

42. Presentation API：用于在外部显示器或投影设备上显示内容的API。

43. Clipboard API：用于访问系统剪贴板的API。

44. Network Information API：用于获取设备的网络连接信息。

45. Presentation API：用于在外部显示器或投影设备上显示内容的API。

46. Bluetooth API：用于与蓝牙设备通信的API。

47. Shape Detection API：用于检测和识别图片和视频中的形状的API。

48. Geolocation API：用于获取设备地理位置信息的API。

49. Web Workers API：用于在后台运行脚本的API。

50. Service Worker API：用于创建离线应用和处理网络请求的API。

51. Web Sockets API：用于在Web应用程序和服务器之间建立持久连接的API。

52. Vibration API：用于在设备上产生震动效果的API。

53. Web SQL Database：用于在浏览器中存储和访问数据库的API（已废弃）。

54. Notification API：用于在浏览器中显示通知的API。

---

浏览器原生JavaScript API的例子

1. Document API：操作HTML文档的API。

- `getElementById('id')`：通过元素的id获取元素。
- `querySelector('selector')`：通过CSS选择器获取匹配的第一个元素。

2. Window API：操作浏览器窗口的API。

- `alert('message')`：弹出警告框显示消息。
- `confirm('question')`：弹出确认框让用户确认。

3. Navigator API：提供有关浏览器和操作系统的信息。

- `navigator.userAgent`：用户代理字符串，包含浏览器信息。
- `navigator.language`：浏览器当前使用的语言。

4. XMLHttpRequest API：发送HTTP请求的API。

- `XMLHttpRequest`：创建XMLHttpRequest对象以发送请求。
- `open('method', 'url')`：配置请求的方法和URL。
- `send()`：发送请求。

5. Fetch API：使用更现代的方式发送HTTP请求和处理响应。

- `fetch('url')`：发送GET请求并返回一个Promise对象。
- `.then(response => response.json())`：解析响应为JSON格式。

6. LocalStorage API：在浏览器中存储数据的API。

- `localStorage.setItem('key', 'value')`：将数据存储到浏览器本地存储。
- `localStorage.getItem('key')`：从本地存储中获取数据。

7. Geolocation API：访问设备的地理位置信息。

- `navigator.geolocation.getCurrentPosition(success, error)`：获取当前位置的经纬度。
- `position.coords.latitude`：获取纬度信息。

8. Canvas API：在网页上绘制图形的API。

- `const ctx = canvas.getContext('2d')`：获取画布的2D渲染上下文。
- `ctx.fillRect(x, y, width, height)`：绘制一个实心矩形。

9. MediaDevices API：访问媒体设备（如摄像头和麦克风）的API。

 - `navigator.mediaDevices.getUserMedia(constraints)`：获取用户媒体流。

10. History API：操作浏览器历史记录的API。

- `history.pushState(data, title, url)`：将新的URL添加到浏览器历史记录中。

11. History API：操作浏览器历史记录的API。

- `history.back()`：返回上一页。
- `history.forward()`：前进到下一页。
- `history.go(n)`：前进或后退n个页面。

12. Web Storage API：在浏览器中存储数据的API。

- `localStorage.setItem('key', 'value')`：将数据以键值对的方式存储到本地存储。
- `localStorage.getItem('key')`：从本地存储中获取指定键的值。

13. Clipboard API：访问剪贴板的API。

- `navigator.clipboard.writeText('text')`：将指定的文本写入剪贴板。
- `navigator.clipboard.readText()`：从剪贴板中读取文本。

14. Intersection Observer API：观察元素与其祖先或视口交叉的API。

- `new IntersectionObserver(callback, options)`：创建一个新的IntersectionObserver实例。
- `observe(target)`：开始观察目标元素。

15. Mutation Observer API：观察DOM更改的API。

- `new MutationObserver(callback)`：创建一个新的MutationObserver实例。
- `observe(target, options)`：开始观察目标元素。

16. Web Workers API：在后台运行脚本的API。

- `new Worker('script.js')`：创建一个新的Web Worker。
- `worker.postMessage(message)`：向Web Worker发送消息。

17. Performance API：访问性能测量数据的API。

- `performance.now()`：返回当前时间的高精度时间戳。
- `performance.timing`：提供有关页面加载时间的详细信息。

18. WebRTC API：实现实时通信的API。

- `navigator.mediaDevices.getUserMedia(constraints)`：获取用户媒体流。
- `RTCPeerConnection`：创建用于建立对等连接的对象。

19. Notification API：显示浏览器通知的API。

- `Notification.requestPermission()`：请求用户授权显示通知。
- `new Notification('title', { options })`：创建新的通知。

20. Fullscreen API：控制全屏显示的API。

- `element.requestFullscreen()`：将指定元素全屏显示。
- `document.exitFullscreen()`：退出全屏显示模式。

21. Geolocation API：用于获取设备的地理位置信息。

- `navigator.geolocation.getCurrentPosition(success, error)`：获取当前位置的经纬度。
- `navigator.geolocation.watchPosition(success, error)`：实时获取设备的位置信息。

22. Web Workers API：在后台运行脚本的API。

- `new Worker(scriptURL)`：创建一个新的Web Worker。
- `worker.postMessage(data)`：向Web Worker发送消息。

23. Canvas API：用于在网页上绘制图形。

- `const ctx = canvas.getContext('2d')`：获取画布的2D渲染上下文。
- `ctx.fillRect(x, y, width, height)`：绘制一个实心矩形。

24. Drag and Drop API：用于实现元素的拖放功能。

- `element.addEventListener('dragstart', event)`：设置拖动开始时的事件处理函数。

25. Media Devices API：用于访问媒体设备（如摄像头和麦克风）的API。

- `navigator.mediaDevices.getUserMedia(constraints)`：获取用户媒体流。

26. Speech Recognition API：用于将语音转换为文本的API。

- `const recognition = new SpeechRecognition()`：创建一个新的语音识别对象。
- `recognition.start()`：开始语音识别。

27. Battery Status API：用于获取设备电池信息的API。

- `navigator.getBattery().then(function(battery) {...})`：获取设备电池对象。
- `battery.level`：返回电池的剩余电量。
- `battery.charging`：返回电池是否正在充电。

28. File API：用于读取和处理本地文件的API。

- `inputElement.addEventListener('change', handleFileSelect)`：监听文件选择事件。
- `fileReader.readAsText(file)`：读取文本文件的内容。

29. Animation API：用于在浏览器中创建动画效果的API。

- `element.animate(keyframes, options)`：创建一个动画效果。
- `animation.play()`：播放动画效果。

30. Speech Synthesis API：用于将文本转换为语音的API。

- `const synth = window.speechSynthesis`：获取语音合成对象。
- `const utterance = new SpeechSynthesisUtterance('Hello World')`：创建一个合成语音实例。
- `synth.speak(utterance)`：将文本转换为语音。

31. Page Visibility API：用于检测页面在浏览器中的可见性状态的API。

- `document.addEventListener('visibilitychange', handleVisibilityChange)`：监听页面可见性变化事件。
- `document.visibilityState`：返回页面的可见性状态。

32. Payment Request API：用于在浏览器中简化支付流程的API。

- `const paymentRequest = new PaymentRequest(supportedInstruments, details)`：创建一个支付请求。
- `paymentRequest.show()`：显示支付请求界面。

33. Beacon API：用于在浏览器后台发送数据的API。

- `navigator.sendBeacon(url, data)`：在浏览器后台发送数据。

34. Presentation API：用于在外部显示器或投影设备上显示内容的API。

- `navigator.presentation.request()`: 请求外部显示器或投影设备。
- `presentationConnection.send(message)`: 向外部设备发送消息。

35. Gamepad API：用于访问和控制游戏手柄和游戏pad的API。

- `window.addEventListener('gamepadconnected', handleGamepadConnected)`：监听游戏手柄连接事件。
- `navigator.getGamepads()`：获取当前连接的游戏手柄。

36. Payment Handler API：用于处理Web支付的API。

- `navigator.serviceWorker.register('payment-handler.js', { type: 'payment-handler' })`：注册支付处理程序。
- `paymentRequest.canMakePayment()`：检查设备是否支持支付。

37. Shape Detection API：用于检测和识别图片和视频中的形状的API。

- `const faceDetector = new FaceDetector()`：创建一个人脸检测器。
- `faceDetector.detect(image)`：检测图像中的人脸。

38. WebRTC API：用于实时通信的API，可以在浏览器之间传输音频、视频和数据。

- `navigator.getUserMedia(constraints, successCallback, errorCallback)`：获取用户的媒体流（如摄像头和麦克风）。
- `RTCPeerConnection`：创建一个点对点连接来进行音视频通信。

39. Web Speech API：用于语音识别和语音合成的API。

- `SpeechRecognition`：语音识别对象，用于将语音转换为文本。
- `SpeechSynthesis`：语音合成对象，用于将文本转换为语音。

40. Intersection Observer API：用于观察元素是否进入或离开浏览器的可视区域。

- `const observer = new IntersectionObserver(callback, options)`：创建一个交叉观察器。
- `observer.observe(target)`：将目标元素添加到观察列表。

41. Web Bluetooth API：用于与蓝牙设备通信的API。

- `navigator.bluetooth.requestDevice(options)`：请求连接蓝牙设备。
- `device.gatt.connect()`：连接到蓝牙设备。

42. Presentation API：用于在外部显示器或投影设备上显示内容的API。

- `navigator.presentation.request()`: 请求外部显示器或投影设备。
- `presentationConnection.send(message)`: 向外部设备发送消息。

43. Clipboard API：用于访问系统剪贴板的API。

- `navigator.clipboard.writeText(text)`：将文本复制到剪贴板。
- `navigator.clipboard.readText()`：从剪贴板中读取文本。

44. Network Information API：用于获取设备的网络连接信息。

- `navigator.connection.type`：返回设备的网络连接类型。
- `navigator.connection.downlink`：返回当前网络连接的下行速度。

45. Presentation API：用于在外部显示器或投影设备上显示内容的API。

- `navigator.presentation.request()`: 请求外部显示器或投影设备。
- `presentationConnection.send(message)`: 向外部设备发送消息。

46. Bluetooth API：用于与蓝牙设备通信的API。

- `navigator.bluetooth.requestDevice(options)`：请求连接蓝牙设备。
- `device.gatt.connect()`：连接到蓝牙设备。

47. Shape Detection API：用于检测和识别图片和视频中的形状的API。

- `const barcodeDetector = new BarcodeDetector()`：创建一个条码检测器。
- `barcodeDetector.detect(image)`：检测图像中的条码。

48. Geolocation API：用于获取设备地理位置信息的API。

- `navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)`：获取设备当前位置。
- `position.coords.latitude`：返回设备的纬度。
- `position.coords.longitude`：返回设备的经度。

49. Web Workers API：用于在后台运行脚本的API。

- `const worker = new Worker('worker.js')`：创建一个Web Worker。
   - `worker.postMessage(message)`：发送消息给Web Worker。
   - `worker.onmessage = function(e) {...}`：接收Web Worker发送的消息。

50. Service Worker API：用于创建离线应用和处理网络请求的API。

- `navigator.serviceWorker.register('service-worker.js')`：注册Service Worker。
- `self.addEventListener('fetch', function(event) {...})`：处理网络请求的回调函数。

51. Web Sockets API：用于在Web应用程序和服务器之间建立持久连接的API。

- `const socket = new WebSocket(url)`：创建一个WebSocket连接。
- `socket.onopen = function() {...}`：WebSocket连接已打开的回调函数。

52. Vibration API：用于在设备上产生震动效果的API。

- `navigator.vibrate(pattern)`：让设备进行震动。
- `navigator.vibrate([200, 100, 200])`：震动200ms，暂停100ms，然后再震动200ms。

53. Web SQL Database：用于在浏览器中存储和访问数据库的API（已废弃）。

- `var db = openDatabase('mydb', '1.0', 'My database', 2 * 1024 * 1024)`：打开数据库。
- `db.transaction(function(tx) {...})`：执行数据库事务。

54. Notification API：用于在浏览器中显示通知的API。

- `Notification.requestPermission().then(function(permission) {...})`：请求用户授权显示通知。
- `new Notification('Hello', { body: 'World' })`：显示一个通知。

本文标签： 浏览器JavaScriptAPI