https open api_Web上的分享(Share)API

33d7b83fb1030213cd68d0e059361c35.png

我认为Web Share API非常酷,简而言之,它会利用您所使用的平台上的原生共享功能(如果该平台支持的话)。

我喜欢这个:

19404597182d2e2cec71c4fc6850fd7f.png

远远不止这些东西:

7b4fa56caee7fb70bdfe3b34a8c19b53.png

为什么?

  • Web Share API只是几行代码。简单!没有图像,没有重量级的JavaScript或iframe。
  • 用户看到的UI是针对其平台定制的,甚至可能是由他们定制的,以在其中包含他们想要的东西。

好样的,Web标准。

但并不是所有地方都支持。例如,我在Chrome浏览器中写这篇博客文章,在桌面Chrome浏览器中无法使用,但在桌面的Safari中却可以工作

e99e38131fe88bd6f4c88b7b5ed581b6.png

所以,如果我要使用它,我宁愿在把按钮放在页面上之前先测试一下是否支持。这是非常简单的:

if (navigator.share) {}

下面是一个例子,如果API被支持的话,我把一个 放在文章上,HTML和CSS省略。

01847e49e875f530d8a3be9f70d463ba.png

JavaScript做了一些花哨的动作来获取文章的标题和第一段,以便在API中使用。我喜欢Jeremy Keith在页面上的做法:

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')    }  );}

你也可以将字符串传递给这些值,这只是在展示你如何在任何页面上动态地做一些工作。

Jeremy也一直在倡导建立一个JavaScript可选的Web Share API版本,他认为可以像这样工作。

然后,指定标题和文本:

用逗号对我来说有点时髦,如果标题中包含逗号怎么办?那指定URL呢?我们可以将它们全部分成属性吗?我想我知道Jeremy会说什么:这是一个简单的声明性版本,如果你想改变默认行为,那就是JavaScript的作用。

如何使用Web Share API

自从在Android的Chrome 61中首次引入以来,Web Share API似乎已经受到关注。从本质上讲,它提供了一种方法,当直接从网站或Web应用程序分享内容时,可以触发设备(或桌面,如果使用Safari)的本地分享对话框,例如链接或联系卡。

虽然用户已经可以通过原生方式分享网页上的内容,但他们必须在浏览器菜单中找到这个选项,即使如此,也无法控制分享的内容。该API的引入让开发者可以利用用户设备上的原生内容分享功能,将分享功能添加到应用或网站中。

18f7a8276bb857043502f95c7a3bc26c.png

与传统方法相比,这种方法具有许多优势:

  • 与你在DIY实现中可能拥有的有限数量的内容相比,用户将获得广泛的内容分享选择。
  • 你可以通过删除各个社交平台上的第三方脚本来缩短页面加载时间。
  • 你不需要为不同的社交媒体网站和电子邮件添加一系列按钮,一个按钮就足以触发设备的原生分享选项。
  • 用户可以在自己的设备上定制自己喜欢的分享目标,而不是仅仅局限于预定义的选项。

关于浏览器支持的说明

在介绍API的工作细节之前,我们先把浏览器支持的问题解决掉。说实话,目前浏览器的支持度并不高。它只适用于Android版Chrome浏览器,以及Safari(桌面和iOS)。

376b58a797cfd5ce4839da5bb173368b.png

但不要因此而不愿意在网站上采用这个API。要实现一个支持不提供支持的浏览器的后备功能是很容易的,你会看到的。

使用它的一些要求

在您自己的Web项目上采用此API之前,需要注意两点:

  • 您的网站必须通过HTTPS提供服务。为了促进本地开发,当您的站点通过localhost运行时,该API也可以使用。
  • 为了防止滥用,API只能在响应一些用户操作(如点击事件)时触发。

这是一个例子

为了演示如何使用这个API,我准备了一个demo,它的工作原理与我的网站上的工作原理基本相同。该示例使用DIY方式,自己自定义分享对话框。

2b4a3578494c17ba9d32c65ab65282ac.gif

此时,一旦点击分享按钮,就会弹出一个对话框,显示出分享内容的几个选项,这是代码的一部分,可帮助我们实现这一目标:

shareButton.addEventListener('click', event => {  shareDialog.classList.add('is-open');});

让我们继续进行示例转换,以改为使用Web Share API。首先要做的是检查用户的浏览器是否确实支持该API,如下所示:

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  }});

这时,一旦在支持的浏览器中点击分享按钮,原生选取器就会弹出所有用户可以分享数据的可能目标。目标可以是社交媒体应用、电子邮件、即时通讯、短信或其他注册分享目标。

API是基于Promise的,所以你可以附加一个 .then() 方法,以便在共享成功时显示成功消息,并使用 .catch() 处理错误。。在实际情况下,您可能希望使用以下代码段获取页面的标题和URL:

const title = document.title;const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;

对于URL,我们首先检查该页面是否有一个规范的URL,如果有,就使用它。否则,我们从 document.location 中抓取 href。

提供后备方案是个好主意

在不支持Web Share API的浏览器中,我们需要提供一种后备机制,以便那些浏览器上的用户仍然可以使用一些共享选项。

在上面的DIY例中,我们弹出一个对话框,其中有一些用于共享内容的选项,并且演示中的按钮实际上并没有链接到任何地方,因为这是一个演示。但是,如果您想了解如何在不使用第三方脚本的情况下创建自己的链接来共享网页,那么Adam Coti的文章就是一个不错的起点。

我们要做的是在不支持Web Share API的浏览器上为用户显示后备对话框。这就像将打开共享对话框的代码移到 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');  }});

现在,无论使用哪种浏览器,所有用户都将受到覆盖。以下是分享按钮在两个移动浏览器上的表现比较,一个是支持Web Share API,另一个是不支持。

6909818880b0ebddfac82c69a4f54729.gif

试试吧!使用支持Web Share的浏览器和不支持的浏览器。它的工作原理应该与上面的演示类似。

结束

这几乎涵盖了您需要了解的有关Web Share API的基本内容。通过在您的网站上实施它,访问者可以在更广泛的社交网络上更容易地与联系人和其他原生应用程序分享您的内容。

另外值得注意的是,如果你的Web应用符合WPA Web应用安装标准,你能够将其添加为共享目标,并添加到用户的主屏幕上。Web Share Target API的此功能,您可以在Google Developers上了解。

尽管对浏览器的支持不多,但回退很容易实现,因此我认为没有理由不采用这种方式。

您是否使用过Web Share API?请在评论中分享。


最近整理了一份优质视频教程资源,想要的可以关注我然后私信“666”即可免费领取哦!如果文章对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/564769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java多对多关系示例

使用集合不仅可以表示一对一的关系,也可以表示多对多的关系。例如,一个学生可以选多门课程,一门课程可以有多个学生参加,那么这就是一个典型的多对多关系。 要完成上面要求,首先应该定义两个类,分别是学生…

无季节效应的非平稳序列分析(一)

目录 Cramer分解定理(1961年提出) 差分 R语言函数 diff 例题: 过差分: 小结 Cramer分解定理(1961年提出) 任何一个时间序列 都可以分解为两部分的叠加:其中一部分是由多项式决定的确定性趋势成分&a…

求一个任意实数c的算术平方根g的算法设计思想_算法复习第四篇——贪心法

公元2020年5月5日,距离算法考试仅剩4天。一、知识归纳1.设计思想只根据当前已有的信息就做出选择,而且一旦做出了选择,将来无论如何都不能更改不从整体最优考虑,所做的选择只是在某种意义上的局部最优这种选择并不总能获得整体最优…

安装百分之80卡住_关注丨男子翻越高铁站台丢命,家属向铁路部门索赔80万!法院这样判...

去年3月,一名男子翻越高铁站台被卡住致死引发广泛关注。事发后,其家属将铁路部门告上法庭,索赔80余万元。日前,法院宣判:死者杨某擅自闯入危险区域负全责,其父母要求铁路部门赔偿的诉请被驳回。事件还原201…

ARIMA模型的介绍

目录 ARIMA模型结构 随机游走模型(random walk) 举例: ARIMA模型的性质 小结 ARIMA模型结构 使用场合:差分平稳序列拟合 模型结构 则有: 随机游走模型(random walk) 模型结构: Karl Pearson(1905)在《自然》杂志上提问:假…

java斗地主游戏

使用java实现斗地主小游戏。 程序分析: 1、创建扑克牌的实体类Poker,设置四个参数:花色、数字、牌值(判断大小)、是否地主牌,实现getset方法和构造方法; 2、创建玩家的实体类Player&#xff0…

为什么总是封板又打开涨停_警惕!如果股票涨停板反复打开说明了什么?

股市禁忌“三进三出”:“三进”为:一是“高位进”,这就是我们常说的追涨。犯有这种错误的投资者,喜欢在股票已经有了很大的涨幅后买进,其买进的依据往往是股票已经放量突破了历史高点或突破了某个高点阻力位等&#xf…

python中表示空类型的是_python中怎么表示空值

首先了解python对象的概念 python中,万物皆对象,所有的操作都是针对对象的。 那什么是对象?5是一个int对象,‘oblong是一个str对象,异常也是一个对象,抽象一点是,人,猫,够…

动态背景登录

前端动态背景登录 效果演示 完整代码 首先我们要导入jquery.js包 html代码 <!doctype html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge,chrome1&qu…

ARIMA模型的建模和预测

目录 基本过程&#xff1a; 1.Green 函数递推公式 2.ARIMA模型的预测 例题 小结 基本过程&#xff1a; 1.Green 函数递推公式 ARIMA模型 也可写成 确定 设 则可得Green函数递推公式 2.ARIMA模型的预测 原则&#xff1a;最小均方误差预测原理 传递形式&#xff1a; 预测…

python画画用哪库好_数据可视化哪款工具更好用?对比7款Python 数据图表工具的性能...

更多腾讯海量技术文章&#xff0c;请关注云加社区&#xff1a;https://cloud.tencent.com/developer/column 作者&#xff1a;CDA数据分析师 摘要&#xff1a;Python 的科学栈相当成熟&#xff0c;各种应用场景都有相关的模块&#xff0c;包括机器学习和数据分析。数据可视化是…

jsp论坛网站模版_网站被降权了?看看这些解决方法,或许有帮助哦

点击标题下「蓝色微信名」可快速关注在前面的文章中&#xff0c;笔者已经给大家介绍了网站被降权的因素。那么当遇到降权的问题该怎么办呢&#xff1f;接下来&#xff0c;笔者就结合本身经历过的网站降权来给大家介绍一下补救措施。1、造成网站首页降权的原因&#xff1a;服务器…

ARIMA模型之疏系数模型

目录 1.疏系数模型的定义 2.拟合ARIMA疏系数模型函数 例题&#xff1a; 小结 1.疏系数模型的定义 ARIMA(p,d,q)模型是指d阶差分后自相关最高阶数为p&#xff0c;移动平均最高阶数为q的模型&#xff0c;通常它包含pq个独立的未知系数: 如果该模型中部分自相关系数 ,1≤j<…

动画分享菜单

制作一个动画分享的菜单 效果演示 注意&#xff1a;在我们的程序开始之前我们一定要导入jquery.js架包并且找到如图所示的矢量图标。 完整代码 html代码 <!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/…

java 双向链表_23张图!万字详解「链表」,从小白到大佬

链表和数组是数据类型中两个重要又常用地基础数据类型&#xff0c;数组是连续存储在内存中的数据结构&#xff0c;因此它的优势是可以通过下标迅速的找到元素的位置&#xff0c;而它的缺点则是在插入和删除元素时会导致大量元素的被迫移动&#xff0c;为了解决和平衡此问题于是…

安庆机器人编程选_安庆市首届中小学机器人创客竞赛举行 460名选手比智慧拼创新 科技感满满!...

机器人熟练完成“奥林匹克火种”采集、点燃、传递等动作;“小狗皮皮的智能家园”、智能停车场、多功能智能小车等创意智能作品巧思新奇……11月28日&#xff0c;在2020年安庆市中小学机器人创客竞赛活动现场&#xff0c;可谓科技感满满&#xff0c;炫酷十足。本次比赛由市教育体…

有季节效应的非平稳序列分析之因素分解

目录 6.1 因素分解理论 6.2因素分解模型 6.2.1因素分解模型的选择 6.2.2趋势效应的提取 简单中心移动平均的良好属性 R语言中&#xff0c;使用filter函数可以做简单移动平均 6.2.3 季节效应的提取 6.2.4 X11季节调节模型 X11模型分析步骤&#xff1a; ​ 确定性…

python变量的使用_python – 如何在变量中使用冒号(:)

你想要一个 slice() object&#xff1a; index slice(0, 2) print(somelist[index]) slice()模拟您可以在[start&#xff1a;stop&#xff1a;stride]预订语法中指定的start,stop和stride值作为对象. 从文档&#xff1a; Return a 07001 object representing the set of indic…

for循环执行 mybatis_Mybatis中使用循环遍历

Mybatis中传参数的方法1.使用注解绑定&#xff0c;mapper.xml 对应方法 不需要指定 parameterType,(推荐使用注解绑定方式)方法接口&#xff1a;List selectByExample(Param("example") CalculateIdeacommissionsum example,Param("roleNameList") List ro…

指数平滑预测模型

目录 1.分类 2.简单指数平滑 简单指数平滑预测&#xff1a; 平滑系数的确定 R中实现&#xff1a; 3. Holt两参数指数平滑 4. Holt-Winters三参数指数平滑 5.ARIMA加法季节模型 R实现 例题&#xff1a; 1.分类 2.简单指数平滑 简单移动平均法向前预测1期&#xff1a; …