Web Share API를 사용하여 OS 공유 UI와 통합-JS 튜토리얼-php.cn

Web Share API를 사용하여 OS 공유 UI와 통합

PHPz

풀어 주다： 2024-07-20 03:22:00

원래의

1121명이 탐색했습니다.

Integrating with the OS Sharing UI using the Web Share API

웹 공유 API를 사용하면 웹 애플리케이션이 운영 체제의 기본 공유 기능을 사용하여 URL, 텍스트, 파일 등의 콘텐츠를 다른 애플리케이션과 직접 공유할 수 있습니다. 이 API는 OS에 내장된 공유 대화 상자를 활용하여 원활하고 통합된 사용자 환경을 제공합니다.

웹 공유 API란 무엇입니까?

Web Share API는 웹 애플리케이션이 기기 운영 체제의 기본 공유 기능을 호출할 수 있게 해주는 최신 JavaScript API입니다. 이 API는 사용자가 웹 앱의 콘텐츠를 이메일, 메시징 앱, 소셜 미디어 플랫폼 등과 같은 다른 애플리케이션에 직접 공유할 수 있도록 하는 데 유용합니다.

요구사항

실제 사례를 살펴보기 전에 다음 사항을 확인하세요.

브라우저 지원: Web Share API는 Chrome, Edge, Safari, Opera를 포함한 대부분의 최신 브라우저에서 지원됩니다. 단, Firefox 및 Internet Explorer에서는 지원되지 않습니다.
HTTPS: Web Share API가 작동하려면 웹 애플리케이션이 HTTPS를 통해 제공되어야 합니다.
모바일 기기: API는 기본적으로 모바일 기기용으로 설계되었지만 일부 데스크톱 환경에서도 지원할 수 있습니다.

실제 사례

이 예에서는 Web Share API를 사용하여 URL, 텍스트 및 파일을 공유하는 "공유" 버튼이 있는 간단한 웹 페이지를 생성합니다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Share API Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>Web Share API Example</h1>
  <button id="shareButton">Share This Page</button>

  <script src="script.js"></script>
</body>
</html>

로그인 후 복사

자바스크립트

document.addEventListener('DOMContentLoaded', () => {
  const shareButton = document.getElementById('shareButton');

  shareButton.addEventListener('click', async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: 'Web Share API Example',
          text: 'Check out this amazing Web Share API example!',
          url: 'https://example.com',
          files: [new File(['Hello, World!'], 'example.txt', { type: 'text/plain' })],
        });
        console.log('Content shared successfully!');
      } catch (error) {
        console.error('Error sharing content:', error);
      }
    } else {
      alert('Web Share API is not supported in your browser.');
    }
  });
});

로그인 후 복사

설명

HTML: HTML 파일에는 "이 페이지 공유"라는 텍스트가 포함된 간단한 버튼이 포함되어 있습니다. 이 버튼을 클릭하면 공유 기능이 실행됩니다.
JavaScript: JavaScript 코드는 클릭 이벤트 리스너를 공유 버튼에 연결하기 전에 DOMContentLoaded 이벤트를 수신하여 DOM이 완전히 로드되었는지 확인합니다.
- navigator.share 메소드는 기본 공유 대화 상자를 호출하는 데 사용됩니다.
- share 메소드는 다음 속성을 가진 객체를 허용합니다.
  - title: 공유할 콘텐츠의 제목입니다.
  - text: 콘텐츠에 대한 텍스트 설명입니다.
  - url: 공유할 URL입니다.
  - 파일: 공유할 파일 배열(선택 사항이며 추가 브라우저 지원이 필요함).