당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API-JS 튜토리얼-php.cn

1. Web Audio API

2. Fullscreen API

3. Web Speech API

4. Web Bluetooth API

5. Vibration API

6. Broadcast Channel API

7. Clipboard API

8. Web Share API

집

웹 프론트엔드

JS 튜토리얼

당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

青灯夜游

Aug 19, 2022 pm 08:18 PM

javascript 프런트 엔드 web api

당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

Web API에는 DOM 액세스와 같은 작은 작업부터 오디오 및 비디오 처리와 같은 복잡한 작업을 수행하는 데 사용할 수 있는 매우 유용한 개체, 속성 및 함수가 있습니다. 일반적인 API에는 Canvas, Web Worker, History, Fetch 등이 포함됩니다. 흔하지는 않지만 유용한 웹 API를 살펴보겠습니다!

전체 텍스트 개요:

Web Audio API
Fullscreen API
Web Speech API
Web Bluetooth API
Vibr API
방송 채널 API
Clipboard API
Web Share API

1. Web Audio API

Audio API를 사용하면 웹에서 오디오 스트림을 작동할 수 있으며, 오디오 소스에 효과와 필터를 추가하는 데 사용할 수 있습니다. 편물. 오디오 소스는 <audio></audio>, 비디오/오디오 소스 파일 또는 오디오 네트워크 스트림에서 가져올 수 있습니다. [관련 권장사항: 자바스크립트 학습 튜토리얼]<audio></audio>、视频/音频源文件或音频网络流。【相关推荐：javascript学习教程】

下面来看一个例子：

    <header>
        <h2>Web APIs<h2>
    </h2>
</h2></header>
    <div>

        <div>
            <div>
                Demo - Audio
            </div>
            <div>
                <div></div>
                <div>
                    <audio></audio>
                </div>

                <div>
                    <button>Init</button>
                    <button>Play</button>
                    <button>Pause</button>
                    <button>Stop</button>
                </div>
                <div>

                    <span>Vol: <input></span>
                    <span>Pan: <input></span>
                </div>

            </div>
        </div>

    </div>


<script>
    const l = console.log
    let audioFromAudioFile = (function() {
        var audioContext
        var volNode
        var pannerNode
        var mediaSource

        function init() {
            l("Init")
        try {
                audioContext = new AudioContext()        
                mediaSource = audioContext.createMediaElementSource(audio)
                volNode = audioContext.createGain()
                volNode.gain.value = 1
                pannerNode = new StereoPannerNode(audioContext, { pan:0 })

                mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
            }
            catch(e) {
                error.innerHTML = "此设备不支持 Web Audio API"
                error.classList.remove("close")
            }
        }

        function play() {
            audio.play()            
        }

        function pause() {
            audio.pause()
        }

        function stop() {
            audio.stop()            
        }

        function changeVolume() {
            volNode.gain.value = this.value
            l("Vol Range:",this.value)
        }

        function changePan() {
            pannerNode.gain.value = this.value
            l("Pan Range:",this.value)
        }

        return {
            init,
            play,
            pause,
            stop,
            changePan,
            changeVolume
        }
    })()
</script>

로그인 후 복사

这个例子中将音频从 <audio></audio> 元素传输到 AudioContext，声音效果（如平移）在被输出到音频输出（扬声器）之前被添加到音频源。

按钮 Init 在单击时调用 init 函数。这将创建一个 AudioContext 实例并将其设置为 audioContext。接下来，它创建一个媒体源 createMediaElementSource(audio)，将音频元素作为音频源传递。音量节点 volNode 由 createGain 创建，可以用来调节音量。接下来使用 StereoPannerNode 设置平移效果，最后将节点连接至媒体源。

당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

点击按钮（Play、Pause、Stop）可以播放、暂停和停止音频。页面有一个音量和平移的范围滑块，滑动滑块就可以调节音频的音量和平移效果。

相关资源：

Demo：web-api-examples.github.io/audio.html
MDN 文档：developer.mozilla.org/zh-CN/docs/…

2. Fullscreen API

Fullscreen API 用于在 Web 应用程序中开启全屏模式，使用它就可以在全屏模式下查看页面/元素。在安卓手机中，它会溢出浏览器窗口和安卓顶部的状态栏（显示网络状态、电池状态等的地方）。

Fullscreen API 方法：

requestFullscreen：系统上以全屏模式显示所选元素，会关闭其他应用程序以及浏览器和系统 UI 元素。
exitFullscreen：退出全屏模式并切换到正常模式。

下面来看一个常见的例子，使用全屏模式观看视频：：

    <header>
        <h2>Web APIs<h2>
    </h2>
</h2></header>
    <div>
        <div>
        <div>
            Demo - Fullscreen
        </div>
        <div>
        <div></div>
        <div>
            This API makes fullscreen-mode of our webpage possible. It lets you select the Element you want to view in fullscreen-mode, then it shuts off the browsers window features like URL bar, the window pane, and presents the Element to take the entire width and height of the system.

In Android phones, it will remove the browsers window and the Android UI where the network status, battery status are displayed, and display the Element in full width of the Android system.
        </div>
        <div>
            <video></video>
            <button>Toogle Fullscreen</button>
        </div>
        <div>
            This API makes fullscreen-mode of our webpage possible. It lets you select the Element you want to view in fullscreen-mode, then it shuts off the browsers window features like URL bar, the window pane, and presents the Element to take the entire width and height of the system.

In Android phones, it will remove the browsers window and the Android UI where the network status, battery status are displayed, and display the Element in full width of the Android system.
        </div>
        </div>
        </div>
    </div>


<script>
    const l =console.log

    function toggle() {
        const videoStageEl = document.querySelector(".video-stage")
        if(videoStageEl.requestFullscreen) {
            if(!document.fullscreenElement){
                videoStageEl.requestFullscreen()
            }
            else {
                document.exitFullscreen()
            }
        } else {
            error.innerHTML = "此设备不支持 Fullscreen API"
            error.classList.remove("close")        
        }
    }
</script>

로그인 후 복사

可以看到，video 元素在 div#video-stage 元素中，带有一个按钮 Toggle Fullscreen。

당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

当点击按钮切换全屏时，我们想让元素 div#video-stage 全屏显示。toggle 函数的实现如下：

function toggle() {
  const videoStageEl = document.querySelector(".video-stage")
  if(!document.fullscreenElement)
    videoStageEl.requestFullscreen()
  else
    document.exitFullscreen()
}

로그인 후 복사

这里通过 querySelector 查找 div#video-stage 元素并将其 HTMLDivElement 实例保存在 videoStageEl 上。

然后，使用 document.fullsreenElement 属性来确定 document 是否是全屏的，所以可以在 videoStageEl 上调用 requestFullscreen()。这将使 div#video-stage 占据整个设备的视图。

如果在全屏模式下点击 Toggle Fullscreen 按钮，就会在 document 上调用 exitFullcreen

예를 살펴보겠습니다.

    <header>
        <h2>Web APIs<h2>
    </h2>
</h2></header>
    <div>
        <div></div>

        <div>
            <div>
                Demo - Text to Speech
            </div>
            <div>
                <div>
                    <input>
                </div>

                <div>
                    <button>Tap to Speak</button>
                </div>
            </div>
        </div>

        <div>
            <div>
                Demo - Speech to Text
            </div>
            <div>
                <div>
                    <textarea></textarea>
                </div>

                <div>
                    <button>Tap and Speak into Mic</button>
                </div>
            </div>
        </div>

    </div>


<script>

    try {
        var speech = new SpeechSynthesisUtterance()
        var SpeechRecognition = SpeechRecognition;
        var recognition = new SpeechRecognition()

    } catch(e) {
        error.innerHTML = "此设备不支持 Web Speech API"
        error.classList.remove("close")                
    }

    function speak() {
        speech.text = textToSpeech.value
        speech.volume = 1
        speech.rate=1
        speech.pitch=1
        window.speechSynthesis.speak(speech)
    }

    function tapToSpeak() {
        recognition.onstart = function() { }

        recognition.onresult = function(event) {
            const curr = event.resultIndex
            const transcript = event.results[curr][0].transcript
            speechToText.value = transcript
        }

        recognition.onerror = function(ev) {
            console.error(ev)
        }

        recognition.start()
    }
</script>

로그인 후 복사

이 예는 오디오를 <audio></audio> 요소에서 AudioContext로 전송합니다. 사운드 효과(예: 패닝)는 출력되기 전에 오디오 출력(스피커)에 추가됩니다. 오디오 출력에.

Button Init는 클릭 시 init 함수를 호출합니다. 그러면 AudioContext 인스턴스가 생성되고 audioContext로 설정됩니다. 다음으로 미디어 소스 createMediaElementSource(audio)를 생성하여 오디오 요소를 오디오 소스로 전달합니다. 볼륨 노드 volNode는 createGain에 의해 생성되며 볼륨을 조정하는 데 사용할 수 있습니다. 다음으로 StereoPannerNode를 사용하여 패닝 효과를 설정하고 마지막으로 노드를 미디어 소스에 연결합니다. 당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

🎜클릭 버튼(재생, 일시 중지, 중지)은 오디오를 재생, 일시 중지 및 중지합니다. 페이지에는 볼륨 및 팬 범위 슬라이더가 있으며 슬라이더를 밀어 오디오 볼륨 및 팬 효과를 조정할 수 있습니다. 🎜🎜🎜관련 리소스: 🎜🎜

web-api-examples.github.io/audio.html

developer.mozilla.org/zh-CN/docs/…🎜🎜

2. 전체 화면 API🎜🎜전체 화면 API는 웹 애플리케이션에서 전체 화면 모드를 활성화하는 데 사용됩니다. 전체 화면 모드에서 페이지/요소를 보는 데 사용됩니다. 안드로이드 휴대폰에서는 브라우저 창과 안드로이드 상단의 상태 표시줄(네트워크 상태, 배터리 상태 등이 표시되는 곳)에서 오버플로됩니다. 🎜🎜전체 화면 API 방법: 🎜

requestFullscreen

exitFullscreen

function speak() {
  const speech = new SpeechSynthesisUtterance()
  speech.text = textToSpeech.value
  speech.volume = 1
  speech.rate = 1
  speech.pitch = 1
  window.speechSynthesis.speak(speech)
}

로그인 후 복사

🎜보시다시피 동영상 요소는 전체 화면 전환 버튼이 있는 div#video-stage 요소에 있습니다. 🎜🎜 당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

🎜🎜당 전체 화면으로 전환하기 위해 버튼을 클릭하면 div#video-stage 요소가 전체 화면으로 표시되기를 원합니다. toggle 기능의 구현은 다음과 같습니다. 🎜

function tapToSpeak() {
  var SpeechRecognition = SpeechRecognition;
  const recognition = new SpeechRecognition()
  recognition.onstart = function() { }
  recognition.onresult = function(event) {
    const curr = event.resultIndex
    const transcript = event.results[curr][0].transcript
    speechToText.value = transcript
  }
  recognition.onerror = function(ev) {
    console.error(ev)
  }
  recognition.start()
}

로그인 후 복사

🎜여기에서는 querySelector를 사용하여 div#video-stage 요소를 찾고 저장합니다. videoStageEl의 HTMLDivElement 인스턴스가 켜져 있습니다. 🎜🎜그런 다음 document.fullsreenElement 속성을 사용하여 문서가 전체 화면인지 확인하고 videoStageEl에서 requestFullscreen()을 호출할 수 있습니다. 코드> . 이렇게 하면 div#video-stage가 전체 기기 보기를 차지하게 됩니다. 🎜🎜전체 화면 모드에서 전체 화면 전환 버튼을 클릭하면 문서에서 exitFullscreen이 호출되어 UI 보기가 일반 보기(전체 화면 종료)로 돌아갑니다. . 🎜🎜🎜🎜🎜🎜관련 자료: 🎜🎜

Demo：web-api-examples.github.io/fullscreen.…
MDN 文档：developer.mozilla.org/zh-CN/docs/…

3. Web Speech API

Web Speech API 提供了将语音合成和语音识别添加到 Web 应用程序的功能。使用此 API，我们将能够向 Web 应用程序发出语音命令，就像在 Android 上通过其 Google Speech 或在 Windows 中使用 Cortana 一样。

下面来看一个简单的例子，使用 Web Speech API 实现文字转语音和语音转文字：

    <header>
        <h2>Web APIs<h2>
    </h2>
</h2></header>
    <div>
        <div></div>

        <div>
            <div>
                Demo - Text to Speech
            </div>
            <div>
                <div>
                    <input>
                </div>

                <div>
                    <button>Tap to Speak</button>
                </div>
            </div>
        </div>

        <div>
            <div>
                Demo - Speech to Text
            </div>
            <div>
                <div>
                    <textarea></textarea>
                </div>

                <div>
                    <button>Tap and Speak into Mic</button>
                </div>
            </div>
        </div>

    </div>


<script>

    try {
        var speech = new SpeechSynthesisUtterance()
        var SpeechRecognition = SpeechRecognition;
        var recognition = new SpeechRecognition()

    } catch(e) {
        error.innerHTML = "此设备不支持 Web Speech API"
        error.classList.remove("close")                
    }

    function speak() {
        speech.text = textToSpeech.value
        speech.volume = 1
        speech.rate=1
        speech.pitch=1
        window.speechSynthesis.speak(speech)
    }

    function tapToSpeak() {
        recognition.onstart = function() { }

        recognition.onresult = function(event) {
            const curr = event.resultIndex
            const transcript = event.results[curr][0].transcript
            speechToText.value = transcript
        }

        recognition.onerror = function(ev) {
            console.error(ev)
        }

        recognition.start()
    }
</script>

로그인 후 복사

당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

第一个演示 Demo - Text to Speech 演示了使用这个 API 和一个简单的输入字段，接收输入文本和一个按钮来执行语音操作。

function speak() {
  const speech = new SpeechSynthesisUtterance()
  speech.text = textToSpeech.value
  speech.volume = 1
  speech.rate = 1
  speech.pitch = 1
  window.speechSynthesis.speak(speech)
}

로그인 후 복사

它实例化了 SpeechSynthesisUtterance() 对象，将文本设置为从输入框中输入的文本中朗读。然后，使用 speech 对象调用 SpeechSynthesis#speak 函数，在扬声器中说出输入框中的文本。

第二个演示 Demo - Speech to Text 将语音识别为文字。点击 Tap and Speak into Mic 按钮并对着麦克风说话，我们说的话会被翻译成文本输入框中的内容。

点击 Tap and Speak into Mic 按钮会调用 tapToSpeak 函数：

function tapToSpeak() {
  var SpeechRecognition = SpeechRecognition;
  const recognition = new SpeechRecognition()
  recognition.onstart = function() { }
  recognition.onresult = function(event) {
    const curr = event.resultIndex
    const transcript = event.results[curr][0].transcript
    speechToText.value = transcript
  }
  recognition.onerror = function(ev) {
    console.error(ev)
  }
  recognition.start()
}

로그인 후 복사

这里实例化了 SpeechRecognition，然后注册事件处理程序和回调。语音识别开始时调用 onstart，发生错误时调用 onerror。每当语音识别捕获一条线时，就会调用 onresult。

在 onresult 回调中，提取内容并将它们设置到 textarea 中。因此，当我们对着麦克风说话时，文字会出现在 textarea 内容中。

相关资源：

Demo：web-api-examples.github.io/speech.html
MDN 文档：developer.mozilla.org/zh-CN/docs/…

4. Web Bluetooth API

Bluetooth API 让我们可以访问手机上的低功耗蓝牙设备，并使用它将网页上的数据共享到另一台设备。

基本 API 是 navigator.bluetooth.requestDevice。调用它将使浏览器提示用户使用设备选择器，用户可以在其中选择一个设备或取消请求。navigator.bluetooth.requestDevice 需要一个强制对象。此对象定义过滤器，用于返回与过滤器匹配的蓝牙设备。

下面来看一个简单的例子，使用 navigator.bluetooth.requestDevice API 从 BLE 设备检索基本设备信息：

  <header>
    <h2>Web APIs<h2>
      </h2>
</h2></header>
      <div>
        
        <div>
          <div>
            Demo - Bluetooth
          </div>
          <div>
            <div></div>
            <div>
              <div>Device Name: <span></span>
</div>
              <div>Device ID: <span></span>
</div>
              <div>Device Connected: <span></span>
</div>
            </div>
            
            <div>
              <button>Get BLE Device</button>
            </div>
            
          </div>
        </div>
        
      </div>
      
    
    <script>
      function bluetoothAction(){
        if(navigator.bluetooth) {
          navigator.bluetooth.requestDevice({
            acceptAllDevices: true
          }).then(device => {            
            dname.innerHTML = device.name
            did.innerHTML = device.id
            dconnected.innerHTML = device.connected
          }).catch(err => {
            error.innerHTML = "Oh my!! Something went wrong."
            error.classList.remove("close")
          })
        } else {
          error.innerHTML = "Bluetooth is not supported."            
          error.classList.remove("close")
        }
      }
</script>

로그인 후 복사

당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

这里会显示设备信息。单击 Get BLE Device 按钮会调用 bluetoothAction 函数：

function bluetoothAction(){
  navigator.bluetooth.requestDevice({
    acceptAllDevices: true
  }).then(device => {            
    dname.innerHTML = device.name
    did.innerHTML = device.id
    dconnected.innerHTML = device.connected
  }).catch(err => {
    console.error("Oh my!! Something went wrong.")
  })
}

로그인 후 복사

bluetoothAction 函数调用带有 acceptAllDevices：true 选项的 navigator.bluetooth.requestDevice API，这将使其扫描并列出所有附近的蓝牙活动设备。它返回了一个 promise，所以将它解析为从回调函数中获取一个参数 device，这个 device 参数将保存列出的蓝牙设备的信息。这是我们使用其属性在设备上显示信息的地方。

相关资源：

Demo：web-api-examples.github.io/bluetooth.h…
MDN 文档：developer.mozilla.org/en-US/docs/…

5. Vibration API

Vibration API 可以使我们的设备振动，作为对我们应该响应的新数据或信息的通知或物理反馈的一种方式。

执行振动的方法是 navigator.vibrate(pattern)。pattern 是描述振动模式的单个数字或数字数组。

这将使设备振动在 200 毫秒之后停止：

navigator.vibrate(200)
navigator.vibrate([200])

로그인 후 복사

这将使设备先振动 200 毫秒，再暂停 300 毫秒，最后振动 400 毫秒并停止：

navigator.vibrate([200, 300, 400])

로그인 후 복사

可以通过传递 0、[]、[0,0,0] 来消除振动。

下面来看一个简单的例子：

  <header>
    <h2>Web APIs<h2>
  </h2>
</h2></header>
  <div>
    <div>
      <div>
        Demo - Vibration
      </div>
      <div>
        <div></div>
        <div>
          <input>
        </div>
        <div>
          <button>Vibrate</button>
        </div>
      </div>
    </div>
  </div>

    
<script>
      if(navigator.vibrate) {
        function vibrate() {
          const time = vibTime.value
          if(time != "")
            navigator.vibrate(time)
        }
      } else {
        error.innerHTML = "Vibrate API not supported in this device."
        error.classList.remove("close")        
      }
</script>

로그인 후 복사

这里有一个输入框和一个按钮。在输入框中输入振动的持续时间并按下按钮。我们的设备将在输入的时间内振动。

당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

相关资源：

Demo：web-api-examples.github.io/vibration.h…
MDN 文档：developer.mozilla.org/zh-CN/docs/…

6. Broadcast Channel API

Broadcast Channel API 允许从同源的不同浏览上下文进行消息或数据的通信。其中，浏览上下文指的是窗口、选项卡、iframe、worker 等。

BroadcastChannel 类用于创建或加入频道：

const politicsChannel = new BroadcastChannel("politics")

로그인 후 복사

politics 是频道的名称，任何使用 politics 始化 BroadcastChannel 构造函数的上下文都将加入 politics 频道，它将接收在频道上发送的任何消息，并可以将消息发送到频道中。

如果它是第一个具有 politics 的 BroadcastChannel 构造函数，则将创建该频道。可以使用 BroadcastChannel.postMessage API 来将消息发布到频道。使用 BroadcastChannel.onmessage API 要订阅频道消息。

下面来看一个简单的聊天应用：

  <header>
    <h2>Web APIs<h2>
   </h2>
</h2></header>
   <div>
       <div>
          <div>
            Demo - BroadcastChannel
          </div>
          <div>
            <div>Open this page in another <i>tab</i>, <i>window</i> or <i>iframe</i> to chat with them.</div>
            <div></div>
            <div>
            </div>
            <div>
              <input>
              <button>Send Msg to Channel</button>
            </div>
          </div>
        </div> 
    </div>

<script>
      const l = console.log;
      try {
        var politicsChannel = new BroadcastChannel("politics")
        politicsChannel.onmessage = onMessage
        var userId = Date.now()
        } catch(e) {
          error.innerHTML = "BroadcastChannel API not supported in this device."
          error.classList.remove("close")
        }
      
      input.addEventListener("keydown", (e) => {
        if(e.keyCode === 13 && e.target.value.trim().length > 0) {
          sendMsg()            
        }
      })
      
      function onMessage(e) {     
        const {msg,id}=e.data   
        const newHTML = "<div class=&#39;chat-msg&#39;><span><i>"+id+": "+msg+""
        displayMsg.innerHTML = displayMsg.innerHTML + newHTML
        displayMsg.scrollTop = displayMsg.scrollHeight
      }
      
      function sendMsg() {
        politicsChannel.postMessage({msg:input.value,id:userId})
        
        const newHTML = "<div class=&#39;chat-msg&#39;><span><i>Me: "+input.value+""
        displayMsg.innerHTML = displayMsg.innerHTML + newHTML
        
        input.value = ""
        
        displayMsg.scrollTop = displayMsg.scrollHeight
      }   
</script>

로그인 후 복사

这里有一个简单的文本和按钮。输入消息，然后按按钮发送消息。下面初始化了politicalChannel，并在 politicalChannel 上设置了一个 onmessage 事件监听器，这样它就可以接收和显示消息。

당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

点击按钮就会调用sendMsg 函数。它通过 BroadcastChannel#postMessage API 将消息发送到 politics 频道。任何初始化此脚本的选项卡、iframe 或工作程序都将接收从此处发送的消息，因此此页面将接收从其他上下文发送的消息。相关资源：

Demo：web-api-examples.github.io/broadcastch…
MDN 文档：developer.mozilla.org/zh-CN/docs/…

7. Clipboard API

复制、剪切和粘贴等剪贴板操作是应用程序中最常见的一些功能。 Clipboard API 使 Web 用户能够访问系统剪贴板并执行基本的剪贴板操作。

以前，可以使用 document.execCommand 与系统剪贴板进行交互。现代异步剪贴板 API 提供了直接读取和写入剪贴板内容的访问权限。

从剪贴板读取内容：

navigator.clipboard.readText().then(clipText =>
  document.getElementById("outbox").innerText = clipText
);

로그인 후 복사

将内容写入剪贴板：

function updateClipboard(newClip) {
  navigator.clipboard.writeText(newClip).then(function() {
    /* clipboard successfully set */
  }, function() {
    /* clipboard write failed */
  });
}

로그인 후 복사

相关资源：

MDN 文档：developer.mozilla.org/zh-CN/docs/…

Share API 可帮助我们在 web 应用上实现共享功能。它给人以移动原生共享的感觉。它使共享文本、文件和指向设备上其他应用程序的链接成为可能。

可通过 navigator.share 方法访问 Web Share API：

if (navigator.share) {
  navigator.share({
    title: '百度',
    text: '百度一下',
    url: '<https:></https:>',
  })
    .then(() => console.log('分享成功'))
    .catch((error) => console.log('分享失败', error));
}

로그인 후 복사

上面的代码使用原生 JavaScript 实现了文本共享。需要注意，我们只能使用 onclick 事件调用此操作：

function Share({ label, text, title }) {
  const shareDetails = { title, text };

  const handleSharing = async () => {
    if (navigator.share) {
      try {
        await navigator.share(shareDetails).then(() => console.log("Sent"));
      } catch (error) {
        console.log(`Oops! I couldn't share to the world because: ${error}`);
      }
    } else {
      // fallback code
      console.log(
        "Web share is currently not supported on this browser. Please provide a callback"
      );
    }
  };
  return (
    <button>
      <span>{label}</span>
    </button>
  );
}

로그인 후 복사

相关资源：

MDN 文档：developer.mozilla.org/en-US/docs/…

更多编程相关知识，请访问：编程视频！！

위 내용은 당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1663

Cakephp 튜토리얼

1419

라라벨 튜토리얼

1313

PHP 튜토리얼

1263

C# 튜토리얼

1236

Related knowledge

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

PHP와 Vue: 프런트엔드 개발 도구의 완벽한 조합 Mar 16, 2024 pm 12:09 PM

PHP와 Vue: 프론트엔드 개발 도구의 완벽한 조합 오늘날 인터넷이 빠르게 발전하는 시대에 프론트엔드 개발은 점점 더 중요해지고 있습니다. 사용자가 웹 사이트 및 애플리케이션 경험에 대한 요구 사항이 점점 더 높아짐에 따라 프런트 엔드 개발자는 보다 효율적이고 유연한 도구를 사용하여 반응형 및 대화형 인터페이스를 만들어야 합니다. 프론트엔드 개발 분야의 두 가지 중요한 기술인 PHP와 Vue.js는 함께 사용하면 완벽한 도구라고 볼 수 있습니다. 이 기사에서는 독자가 이 두 가지를 더 잘 이해하고 적용할 수 있도록 PHP와 Vue의 조합과 자세한 코드 예제를 살펴보겠습니다.

Django는 프론트엔드인가요, 백엔드인가요? 확인 해봐! Jan 19, 2024 am 08:37 AM

Django는 빠른 개발과 깔끔한 방법을 강조하는 Python으로 작성된 웹 애플리케이션 프레임워크입니다. Django는 웹 프레임워크이지만 Django가 프런트엔드인지 백엔드인지에 대한 질문에 답하려면 프런트엔드와 백엔드의 개념에 대한 깊은 이해가 필요합니다. 프론트엔드는 사용자가 직접 상호작용하는 인터페이스를 의미하고, 백엔드는 HTTP 프로토콜을 통해 데이터와 상호작용하는 서버측 프로그램을 의미합니다. 프론트엔드와 백엔드가 분리되면 프론트엔드와 백엔드 프로그램을 독립적으로 개발하여 각각 비즈니스 로직과 인터랙티브 효과, 데이터 교환을 구현할 수 있습니다.

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

Go 언어 프런트엔드 기술 탐색: 프런트엔드 개발을 위한 새로운 비전 Mar 28, 2024 pm 01:06 PM

빠르고 효율적인 프로그래밍 언어인 Go 언어는 백엔드 개발 분야에서 널리 사용됩니다. 그러나 Go 언어를 프런트엔드 개발과 연관시키는 사람은 거의 없습니다. 실제로 프런트엔드 개발에 Go 언어를 사용하면 효율성이 향상될 뿐만 아니라 개발자에게 새로운 지평을 열어줄 수도 있습니다. 이 기사에서는 프런트엔드 개발에 Go 언어를 사용할 수 있는 가능성을 살펴보고 독자가 이 영역을 더 잘 이해할 수 있도록 구체적인 코드 예제를 제공합니다. 전통적인 프런트엔드 개발에서는 사용자 인터페이스를 구축하기 위해 JavaScript, HTML, CSS를 사용하는 경우가 많습니다.

Django: 프론트엔드와 백엔드 개발을 모두 처리할 수 있는 마법의 프레임워크! Jan 19, 2024 am 08:52 AM

Django: 프론트엔드와 백엔드 개발을 모두 처리할 수 있는 마법의 프레임워크! Django는 효율적이고 확장 가능한 웹 애플리케이션 프레임워크입니다. MVC, MTV를 포함한 다양한 웹 개발 모델을 지원할 수 있으며 고품질 웹 애플리케이션을 쉽게 개발할 수 있습니다. Django는 백엔드 개발을 지원할 뿐만 아니라 프런트엔드 인터페이스를 빠르게 구축하고 템플릿 언어를 통해 유연한 뷰 표시를 구현할 수 있습니다. Django는 프론트엔드 개발과 백엔드 개발을 완벽한 통합으로 결합하므로 개발자가 전문적으로 학습할 필요가 없습니다.

프론트엔드 면접관이 자주 묻는 질문 Mar 19, 2024 pm 02:24 PM

프론트엔드 개발 인터뷰에서 일반적인 질문은 HTML/CSS 기초, JavaScript 기초, 프레임워크 및 라이브러리, 프로젝트 경험, 알고리즘 및 데이터 구조, 성능 최적화, 크로스 도메인 요청, 프론트엔드 엔지니어링, 디자인 패턴, 새로운 기술 및 트렌드. 면접관 질문은 후보자의 기술적 능력, 프로젝트 경험, 업계 동향에 대한 이해를 평가하기 위해 고안되었습니다. 따라서 지원자는 자신의 능력과 전문성을 입증할 수 있도록 해당 분야에 대한 충분한 준비를 갖추어야 합니다.

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

See all articles

당신이 알지 못할 수도 있지만 매우 유용한 8가지 웹 API

1. Web Audio API

2. Fullscreen API

3. Web Speech API

4. Web Bluetooth API

5. Vibration API

6. Broadcast Channel API

7. Clipboard API

8. Web Share API

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제