非常多的網站需要分享的功能,從 facebook 分享按鈕、line share 按鈕.....等等等,還有整合分享的外掛,分享外掛多不勝數,不妨也可以試試看這一個手機(IOS和Android)原生的分享功能 Navigator.share()。
網站製作開發時,非常多的網站需要分享的功能,從 facebook 分享按鈕、line share 按鈕.....等等等,還有整合分享的外掛,分享外掛多不勝數,不妨也可以試試看這一個。
使用前必須要先知道的是 Web Share API 你的網站必須支援 https,並且它於部分APP內的瀏覽不支援 (EX: line對話開啟的瀏覽器)
我們來看看MDN上面的文獻吧
https://developer.mozilla.org/
let shareData = {
title: 'MDN',
text: 'Learn web development on MDN!',
url: 'https://developer.mozilla.org',
}
const btn = document.querySelector('button');
const resultPara = document.querySelector('.result');
btn.addEventListener('click', () => {
navigator.share(shareData)
.then(() =>
resultPara.textContent = 'MDN shared successfully'
)
.catch((e) =>
resultPara.textContent = 'Error: ' + e
)
});
title: 網站名稱
text: 分享訊息
url: 網址
Chance Design 網站右下角分享按鈕就是用這個唷! 大家可以體驗看看。