CODEWITHSUNDEEP
javascripthtmliossafarimobile-safari
gcg1
gcg1

Reputation: 81

How to open the native iOS share modal from a link on a webpage?

I have a share button on my webpage. I want tapping the button in mobile Safari to open the iOS native share modal.

How do I achieve this with HTML/Javascript?

I can see that the Wall Street Journal have been able to achieve this with the share buttons on their website. I have not been able to find any answers on Stack Overflow or Google.

Upvotes: 4

Views: 4647

Answers (3)

Hesham Mamdouh
Hesham Mamdouh

Reputation: 11

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

also check here for more info https://web.dev/web-share/

Upvotes: 0

krolovolk
krolovolk

Reputation: 472

You can use feature

navigator.share

But not all browsers support it. In this case you can check it by using this construction:

if (navigator.share) {
  title: ' ',
  text: ' ',
  url: ' '
} else {
  // Fallback
}

For example use this code

   shareButton.addEventListener('click', event => {
      if (navigator.share) {
        navigator.share({
          title: 'WebShare API Demo',
          url: ' '
        }).then(() => {
          console.log('Thanks for sharing!');
        })
        .catch(console.error);
      } else {
        shareDialog.classList.add('is-open');
      }
    });

Where

shareDialog.classList.add('is-open'); It opens your alternative share panel.

More info about native share API support and features you can read there

Upvotes: 1

pierre
pierre

Reputation: 310

You could try 

navigator.share({
 title: 'Your title',
 text: 'Your text',
 url: 'Your url to share'
})

on click on your link.

Upvotes: 2

Related Questions