웹 공유 API에서

웹 공유 API는 대단합니다! (우리의 보고서 참조). 간단히 말해서, 플랫폼의 기본 공유 기능 (플랫폼이 지원하는 경우)을 활용합니다.

나는 다른 방법보다 훨씬 좋아합니다.

왜?

• Web Share API에는 몇 줄의 코드 만 필요하며 매우 간단합니다! 이미지, 긴 JavaScript 또는 iframes가 필요하지 않으며 구식의 위험이 없습니다 (Ahem, Google).
• 사용자가 보는 UI는 플랫폼에 따라 사용자 정의되며 원하는 것을 포함하여 사용자가 사용자 정의 할 수도 있습니다.

좋은 웹 표준!

그러나 모든 플랫폼이 지원하는 것은 아닙니다. 예를 들어 Chrome 에이 블로그 게시물을 작성하고 있으며 Desktop Chrome에서는 작동하지 않지만 Desktop Safari에서 작동합니다!

따라서 사용하려면 페이지에 버튼을 넣기 전에 지원 상황을 테스트하고 싶습니다. 이것은 매우 쉽습니다 :

 if (navigator.share) {
  // 여기 코드}

다음은 API가 지원되면 게시물에 버튼을 추가합니다.

이 JavaScript 코드는 약간 처리되어 API에서 사용할 기사의 제목과 첫 번째 단락을 얻습니다. Jeremy Keith가 페이지 수준에서 처리하는 방식이 마음에 듭니다.

 if (navigator.share) {
  navigator.share ({
    제목 : document.querySelector ( 'title'). TextContent,
    텍스트 : document.querySelector ( 'meta [name = "description"]'). getAttribute ( 'content'),
    url : document.querySelector ( 'link [rel = "canonical"]'). getAttribute ( 'href')
  });
}

이 값에 직접 문자열을 전달할 수도 있습니다. 이것은 단지 모든 페이지에서 동적으로 작업을 수행하는 방법을 보여줍니다.

Jeremy는 또한 Web Share API의 선택적 JavaScript 버전을 옹호하고 있습니다.

 <button onclick="navigator.share(...)">공유하다</button>

그런 다음 제목과 텍스트를 지정하는 데 사용됩니다.

 <button data-title="..." data-text="...">공유하다</button>

나는 이것이 쉼표를 사용하여 약간 이상하다고 생각합니다. 제목에 쉼표가 포함되어 있으면 어떻게해야합니까? 그렇다면 URL을 지정하면 어떻게됩니까? 우리는 그것들을 속성으로 나눌 수 있습니까? 제레미가 무엇을 말할 것인지 알고 있다고 생각합니다. 이것은 간단한 선언 버전입니다. 기본 동작을 변경하려면 이것이 JavaScript의 것입니다.

그러나 브라우저가 지원하지 않으면 존재해야합니까? 물론 Polyfill을 사용하는 경우 :

이 polyfill은 버튼을 Mailto : 지원없이 경험으로 바꿉니다. 이것은 매우 영리합니다. 제작 환경에 있다면 기능이 실제로 지원되는 경우에만 버튼을 추가 할 것입니다.

위 내용은 웹 공유 API에서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!