JavaScript - Diese Webseite teilen
- Für Chromium-Browser (Microsoft Edge, Google Chrome, Opera) und Mozilla Firefox (96).
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>JavaScript - Diese Webseite teilen - Werner-Zenk.de</title>
<meta name="description" content="JavaScript - Diese Webseite teilen (Share Button).">
</head>
<body>
<style>
button#teilen {
font-family: Verdana, Arial, Sans-Serif;
font-size: 1.1rem;
}
button#teilen::before {
content: Url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAABuElEQVR42mOQkJbllJBV4BSXkeeUkFHglJCW4xQUEWdnQALKyirTVFQ1NK1t7BiRxRkkZeT+iUhIvxUWl3orLCb1VkRM8i2fgPCB+KRURgsrG+7I6Fg9MUnpO1KyCp/kFZTyDY2MeeCaRcUkvjOgAVc3DwljM8sGRRX1a0CX/JGUlf8vKavwH8j+p6quedLK2ta8urqamUFEVBxFc2BQiJGcgvIpkGJcWEJS5r2Ojk4timZZeQUheSXV09g0SMkpQjTKKPxXVFZ9raWlVQTXHBuXwKijZ1ApKSMP0/AX6NxPQPqDhIz8H6jYT6DfVwcGh5qCbYNp1tLW5ZGWVTgLVPhPRkHpioaWTr6ymqaloqqGkbCo+HUpWfn7Wjp6WUqq6hxwP8I029k7qkhKy/4BhvxeGXklOeRwUFBSabCxtdeVlVeSkZaR1cTQrGdgFCwuJftKVV1DDz303dw9WUC0uIR0sqi4xBQMzfwCApHyisq9DHiAmLhkMlA9pubQ0PB6XV1dHbI0V1ZWB7a0tDCRpFlMXAqsedmyFXg1wvwsIobkZ2CS+y8mLfdNHIZlkDCKmPw3oLpfyJoBTSOL9FTr/0kAAAAASUVORK5CYII=");
}
</style>
<p>
<button id="teilen"> Diese Webseite teilen</button>
</p>
<script>
const btn = document.querySelector("#teilen");
const title = document.title;
const text = document.getElementsByName("description")[0].getAttribute("content");
const url = document.URL;
const shareData = {
title: `${title}`,
text: `${text}`,
url: `${url}`
}
btn.addEventListener("click", async () => {
await navigator.share(shareData);
});
</script>
➤
Im Dokument müssen die HTML-Tags: <title>Seitentitel</title> und <meta name="description" content="Beschreibung"> vorhanden sein.
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<cite> Zitat
PHP - foreach und list effizient einsetzen