赵彤刚的博客
茫茫人海,感谢相遇!
赵彤刚的博客

用原生JS实现网页调用系统自带的分享功能

用原生JS实现网页调用系统自带的分享功能

流量当下的网络大环境,如何让我们的网站更容易的出现在网民的视野中?这里我们就用原生JS实现网页调用系统自带的分享功能,为网页增加一个分享功能!

Navigator.share() 方法通过调用本机的共享机制作为 Web Share API 的一部分。如果不支持 Web Share API,则此方法为 undefined

语法参数:

url 要共享的 URL( USVString )
text 要共享的文本( USVString )
title 要共享的标题( USVString
files 要共享的文件(“FrozenArray”)

注意:Navigator.share()这是一个实验中的功能,此功能某些浏览器尚在开发中。

实现原理:

 JS代码:

建议:使用前先判断浏览器是否支持此功能,若不支持,可以设置其它替代方案;若支持,则可以直接使用此功能来进行分享操作!

判断浏览器是否支持:

if (!navigator.share) {
				//当浏览器支持此功能时
				alert("支持");
			} else {
				//当浏览器不支持此功能时
				alert("不支持");
			}

功能代码:

navigator.share({
					//要共享的标题
					title: window.location.title,
					//要共享的 URL
					url: window.location.href,
					//要共享的文本
					text: '全网视频免费看,宅男必备!'
				});

代码整合:

if (!navigator.share) {
				alert("您的浏览器不支持此函数!");
			} else {
				navigator.share({
					//要共享的标题
					title: window.location.title,
					//要共享的 URL
					url: window.location.href,
					//要共享的文本
					text: '全网视频免费看,宅男必备!'
				});
			}

浏览器兼容性:

数据来源:MDN 

编辑

END!!!

赞赏
本文标题:《用原生JS实现网页调用系统自带的分享功能
链接地址:https://blog.heheda.top/1013.html
版权声明:注明于文章开头的引语部分。若引语部分未作出声明,则默认版权归本站所有!

赵彤刚

文章作者

抬头仰望星空,梦想不远不近!

猜你喜欢

发表回复

textsms
account_circle
email


赵彤刚的博客

用原生JS实现网页调用系统自带的分享功能
流量当下的网络大环境,如何让我们的网站更容易的出现在网民的视野中?这里我们就用原生JS实现网页调用系统自带的分享功能,为网页增加一个分享功能! Navigator.share() 方法通过调用本…
扫描二维码继续阅读
2022-06-02