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-familyVerdanaArialSans-Serif;
 
font-size1.1rem;
}

button#teilen::before {
 
contentUrl("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

CSS - Sternebewertung

PHP - foreach und list effizient einsetzen

JavaScript - Seite autom. jede Minute neu laden

MySQL - Datensatz eintragen

Schneller Design Wechsel
Das Design von Webseiten ändert sich ca.1–2-mal pro Jahr. Um eine Umstellung zu erleichtern, empfiehlt sich eine externe CSS-Datei. Dort kann man für die ganze Homepage zum Beispiel eine andere Hintergrundfarbe in wenigen Sekunden ändern. Weitere Informationen wie man solch eine Datei erstellt finden Sie unter: CSS-Datei erstellen.