.box
button#shareBtn Нажмите чтобы использовать Web Share API
p#share-links Ваш браузер не поддерживает Web Share API. Кнопка была скрыта, а Вы можете отобразить классические ссылки.
a.copyright(href="https://webstacker.net/front-end/javascript/web-share-api-delimsya-kontentom-pravilno/", target="_blank") Статья на Webstacker.net
View Compiled
body {
display: flex;
min-height: 100vh;
font-size: 16px;
text-align: center;
}
.box {
margin: auto;
width: 100%;
max-width: 480px;
padding: 15px;
display: flex;
flex-flow: column wrap;
align-items: center;
}
.copyright {
margin-top: 30px;
}
#shareBtn {
display: none;
border: 1px solid #eee;
padding: 15px;
width: auto;
max-width: 260px;
background-color: transparent;
transition: border-color .15s ease;
cursor: pointer;
&:hover {
border-color: #212121;
transition: border-color .15s ease;
}
&:active {
color: inherit;
}
}
#share-links {
margin: 0;
}
View Compiled
if (navigator.share) {
var shareBtn = document.querySelector("#shareBtn"),
shareLinks = document.querySelector("#share-links"),
articleData = {
url: "https://codepen.io/nickdeny/pen/rNaqWKd",
title: "Webstacker – Web Share API",
text:
"Краткое описание контента. В некоторых приложениях также используется как Title."
};
shareBtn.style.display = "block";
shareLinks.style.display = "none";
shareBtn.addEventListener("click", () => {
navigator
.share(articleData)
.then(() => console.log("Article shared!"))
.catch(err => console.log(`${err}`));
});
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.