询盘网站,网站所有权查询,图怪兽作图神器下载,做pc端网站咨询我认为Web Share API非常酷#xff0c;简而言之#xff0c;它会利用您所使用的平台上的原生共享功能(如果该平台支持的话)。我喜欢这个#xff1a;在iOS上激活的Web Share API远远不止这些东西#xff1a;为什么#xff1f;Web Share API只是几行代码。简单#xff01;没… 我认为Web Share API非常酷简而言之它会利用您所使用的平台上的原生共享功能(如果该平台支持的话)。我喜欢这个在iOS上激活的Web Share API远远不止这些东西为什么Web Share API只是几行代码。简单没有图像没有重量级的JavaScript或iframe。用户看到的UI是针对其平台定制的甚至可能是由他们定制的以在其中包含他们想要的东西。好样的Web标准。但并不是所有地方都支持。例如我在Chrome浏览器中写这篇博客文章在桌面Chrome浏览器中无法使用但在桌面的Safari中却可以工作所以如果我要使用它我宁愿在把按钮放在页面上之前先测试一下是否支持。这是非常简单的if (navigator.share) {下面是一个例子如果API被支持的话我把一个 放在文章上HTML和CSS省略。Safari浏览器效果Chrome不支持JavaScript做了一些花哨的动作来获取文章的标题和第一段以便在API中使用。我喜欢Jeremy Keith在页面上的做法if (navigator.share) {你也可以将字符串传递给这些值这只是在展示你如何在任何页面上动态地做一些工作。Jeremy也一直在倡导建立一个JavaScript可选的Web Share API版本他认为可以像这样工作。button typeshare然后指定标题和文本button typeshare valuetitle,text用逗号对我来说有点时髦如果标题中包含逗号怎么办那指定URL呢我们可以将它们全部分成属性吗我想我知道Jeremy会说什么这是一个简单的声明性版本如果你想改变默认行为那就是JavaScript的作用。如何使用Web Share API自从在Android的Chrome 61中首次引入以来Web Share API似乎已经受到关注。从本质上讲它提供了一种方法当直接从网站或Web应用程序分享内容时可以触发设备(或桌面如果使用Safari)的本地分享对话框例如链接或联系卡。虽然用户已经可以通过原生方式分享网页上的内容但他们必须在浏览器菜单中找到这个选项即使如此也无法控制分享的内容。该API的引入让开发者可以利用用户设备上的原生内容分享功能将分享功能添加到应用或网站中。iOS提供了许多原生共享选项与传统方法相比这种方法具有许多优势与你在DIY实现中可能拥有的有限数量的内容相比用户将获得广泛的内容分享选择。你可以通过删除各个社交平台上的第三方脚本来缩短页面加载时间。你不需要为不同的社交媒体网站和电子邮件添加一系列按钮一个按钮就足以触发设备的原生分享选项。用户可以在自己的设备上定制自己喜欢的分享目标而不是仅仅局限于预定义的选项。关于浏览器支持的说明在介绍API的工作细节之前我们先把浏览器支持的问题解决掉。说实话目前浏览器的支持度并不高。它只适用于Android版Chrome浏览器以及Safari(桌面和iOS)。这个浏览器支持数据来自Caniuse它有更详细的数据数字表示浏览器支持该版本及以上的功能。但不要因此而不愿意在网站上采用这个API。要实现一个支持不提供支持的浏览器的后备功能是很容易的你会看到的。使用它的一些要求在您自己的Web项目上采用此API之前需要注意两点您的网站必须通过HTTPS提供服务。为了促进本地开发当您的站点通过localhost运行时该API也可以使用。为了防止滥用API只能在响应一些用户操作(如点击事件)时触发。这是一个例子为了演示如何使用这个API我准备了一个demo它的工作原理与我的网站上的工作原理基本相同。该示例使用DIY方式自己自定义分享对话框。此时一旦点击分享按钮就会弹出一个对话框显示出分享内容的几个选项这是代码的一部分可帮助我们实现这一目标click, event {让我们继续进行示例转换以改为使用Web Share API。首先要做的是检查用户的浏览器是否确实支持该API如下所示if (navigator.share) {使用Web Share API就像调用 navigator.share() 方法并传递一个至少包含以下字段之一的对象一样简单。url一个字符串代表要共享的URL。通常是文档的网址但不是必须的。您可以通过Web Share API共享任何URL。title表示要共享的标题的字符串通常是 document.title。text您要包括的任何文本。实际情况如下click, event {这时一旦在支持的浏览器中点击分享按钮原生选取器就会弹出所有用户可以分享数据的可能目标。目标可以是社交媒体应用、电子邮件、即时通讯、短信或其他注册分享目标。API是基于Promise的所以你可以附加一个 .then()方法以便在共享成功时显示成功消息并使用 .catch()处理错误。。在实际情况下您可能希望使用以下代码段获取页面的标题和URLconst title 对于URL我们首先检查该页面是否有一个规范的URL如果有就使用它。否则我们从 document.location中抓取 href。提供后备方案是个好主意在不支持Web Share API的浏览器中我们需要提供一种后备机制以便那些浏览器上的用户仍然可以使用一些共享选项。在上面的DIY例中我们弹出一个对话框其中有一些用于共享内容的选项并且演示中的按钮实际上并没有链接到任何地方因为这是一个演示。但是如果您想了解如何在不使用第三方脚本的情况下创建自己的链接来共享网页那么Adam Coti的文章就是一个不错的起点。我们要做的是在不支持Web Share API的浏览器上为用户显示后备对话框。这就像将打开共享对话框的代码移到 else块中一样简单click, event {现在无论使用哪种浏览器所有用户都将受到覆盖。以下是分享按钮在两个移动浏览器上的表现比较一个是支持Web Share API另一个是不支持。试试吧使用支持Web Share的浏览器和不支持的浏览器。它的工作原理应该与上面的演示类似。结束这几乎涵盖了您需要了解的有关Web Share API的基本内容。通过在您的网站上实施它访问者可以在更广泛的社交网络上更容易地与联系人和其他原生应用程序分享您的内容。另外值得注意的是如果你的Web应用符合WPA Web应用安装标准你能够将其添加为共享目标并添加到用户的主屏幕上。Web Share Target API的此功能您可以在Google Developers上了解。尽管对浏览器的支持不多但回退很容易实现因此我认为没有理由不采用这种方式。
