其他
Web上的分享(Share)API
远远不止这些东西:
为什么?
Web Share API只是几行代码。简单!没有图像,没有重量级的JavaScript或iframe。
用户看到的UI是针对其平台定制的,甚至可能是由他们定制的,以在其中包含他们想要的东西。
if (navigator.share) {
}
<button>
放在文章上,HTML和CSS省略。if (navigator.share) {
navigator.share(
{
title: document.querySelector('title').textContent,
text: document.querySelector('meta[name="description"]').getAttribute('content'),
url: document.querySelector('link[rel="canonical"]').getAttribute('href')
}
);
}
<button type="share">
然后,指定标题和文本:
<button type="share" value="title,text">
如何使用Web Share API
与传统方法相比,这种方法具有许多优势:
与你在DIY实现中可能拥有的有限数量的内容相比,用户将获得广泛的内容分享选择。 你可以通过删除各个社交平台上的第三方脚本来缩短页面加载时间。 你不需要为不同的社交媒体网站和电子邮件添加一系列按钮,一个按钮就足以触发设备的原生分享选项。 用户可以在自己的设备上定制自己喜欢的分享目标,而不是仅仅局限于预定义的选项。
关于浏览器支持的说明
使用它的一些要求
在您自己的Web项目上采用此API之前,需要注意两点:
您的网站必须通过HTTPS提供服务。为了促进本地开发,当您的站点通过localhost运行时,该API也可以使用。
为了防止滥用,API只能在响应一些用户操作(如点击事件)时触发。
这是一个例子
shareButton.addEventListener('click', event => {
shareDialog.classList.add('is-open');
});
if (navigator.share) {
// Web Share API is supported
} else {
// Fallback
}
使用Web Share API就像调用 navigator.share()
方法并传递一个至少包含以下字段之一的对象一样简单。
url
:一个字符串,代表要共享的URL。通常是文档的网址,但不是必须的。您可以通过Web Share API共享任何URL。title
:表示要共享的标题的字符串,通常是 document.title。text
:您要包括的任何文本。
shareButton.addEventListener('click', event => {
if (navigator.share) {
navigator.share({
title: 'WebShare API Demo',
url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
}).then(() => {
console.log('Thanks for sharing!');
})
.catch(console.error);
} else {
// fallback
}
});
.then()
方法,以便在共享成功时显示成功消息,并使用 .catch()
处理错误。。在实际情况下,您可能希望使用以下代码段获取页面的标题和URL:const title = document.title;
const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;
document.location
中抓取 href
。提供后备方案是个好主意
else
块中一样简单:shareButton.addEventListener('click', event => {
if (navigator.share) {
navigator.share({
title: 'WebShare API Demo',
url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
}).then(() => {
console.log('Thanks for sharing!');
})
.catch(console.error);
} else {
shareDialog.classList.add('is-open');
}
});
结束
原文:https://css-tricks.com/how-to-use-the-web-share-api/
更多文章
我不能没有的5个Vue.js库 TypeScript和Nodemon终极设置! cURL简介:高级程序员都在用的工具 8个JavaScript库可更好地处理本地存储 引入适用于双屏和可折叠设备的Web API 听说你熟练使用Vue.js,这9种Vue技术你掌握了吗? 在Vue Vite应用程序中实现暗/亮模式 2020 开发人员生态系统现状
粉丝福利 118期留言中奖用户:暂无 临走前留下,今天的福利 福利1:《Node.js网络爬虫开发2019新版》视频教程 获取地址请在公众号对话框中回复关键字:004 福利2:在看+留言,张张会在留言区随机抽取一位认真留言的小伙伴,给他发一个红包奖励
- END -
走心的分享更容易被抽中~
开奖时间 下期文末
点赞 + 在看 + 留言
下一个幸运儿就是你
👇