Automatisiertes Auslesen von Website-Inhalten mit einem JavaScript-Script
Das Auslesen von Inhalten von Websites kann eine mühsame und zeitraubende Aufgabe sein, insbesondere wenn es darum geht, Informationen von mehreren Unterseiten einer Website zu sammeln. Um diese Herausforderung zu bewältigen, haben wir ein nützliches JavaScript-Script entwickelt, das es uns ermöglicht, Website-Inhalte automatisiert auszulesen. In diesem Artikel werden wir das Script detailliert vorstellen und erklären, wie es funktioniert.
1. Die Idee hinter dem Script:
Die Idee hinter unserem JavaScript-Script ist es, die Inhalte von Websites zu durchsuchen und bestimmte Informationen von den Unterseiten zu extrahieren. Dazu wird das Script die Start-URL der Website erhalten und alle Unterseiten dieser Website abrufen. Anschließend werden die Titel, Titellängen und Meta-Descriptions der Unterseiten gesammelt und in einer übersichtlichen Tabelle präsentiert.
2. Die Funktionsweise des Scripts:
Zu Beginn gibt der Benutzer die gewünschte Start-URL in ein Eingabefeld ein und kann optional angeben, wie viele Unterseiten auslesen werden sollen. Nach Eingabe einer speziellen PIN wird das Formular entsperrt und der Benutzer kann den Auslesevorgang starten.
3. Der Auslesevorgang:
Sobald der Benutzer auf den “Seiten auslesen”-Button klickt und die korrekte PIN eingegeben hat, beginnt das JavaScript-Script mit dem Auslesevorgang. Es sendet eine AJAX-Anfrage an den Server, um die Inhalte der Unterseiten abzurufen. Dabei wird ein zufälliger Zeitstempel verwendet, um sicherzustellen, dass die Daten nicht gecacht werden.
4. Das Auslesen der Daten:
Das Script durchsucht alle Unterseiten der angegebenen Start-URL und extrahiert die Titel, Titellängen und Meta-Descriptions jeder Seite. Es stoppt entweder, wenn die gewünschte Anzahl von Unterseiten erreicht ist oder wenn es alle Unterseiten durchlaufen hat.
5. Die Darstellung der Ergebnisse:
Nachdem das Script die Daten erfolgreich gesammelt hat, werden diese in einer interaktiven Tabelle präsentiert. Die Tabelle kann nach den verschiedenen Spalten sortiert werden, um die Ergebnisse besser zu analysieren.
6. Die Vorteile des Scripts:
Das JavaScript-Script bietet mehrere Vorteile. Es automatisiert den Ausleseprozess und spart wertvolle Zeit und Mühe. Zudem ermöglicht es dem Benutzer, die gewünschten Informationen von einer Website schnell und einfach zu erfassen, ohne manuell jede Seite besuchen zu müssen.
7. Die Sicherheit:
Obwohl das Script mit einer PIN geschützt ist, sollte beachtet werden, dass die PIN-Überprüfung auf der Client-Seite erfolgt und nicht die sicherste Methode ist. Um die Sicherheit zu erhöhen, kann die PIN-Überprüfung auf der Server-Seite durchgeführt werden. Der Pin dient dazu, dass nur ich das Script nutzen kann und nicht der Öffentlichkeit zur Verfügung stelle.
Fazit:
Das JavaScript-Script zum automatisierten Auslesen von Website-Inhalten ist ein leistungsstolles Werkzeug, um Daten von Websites schnell und effizient zu sammeln. Mit der Möglichkeit, die gewünschte Anzahl von Unterseiten anzugeben und die Ergebnisse in einer sortierbaren Tabelle darzustellen, bietet das Script eine benutzerfreundliche Lösung für das Web-Scraping.
Es ist wichtig, die PIN-Überprüfung und die Sicherheit des Scripts zu berücksichtigen, um unerwünschten Zugriff zu verhindern. Mit diesem nützlichen Tool können Forscher, Entwickler und Analysten wertvolle Daten von Websites extrahieren und für ihre Projekte nutzen. Ich meinem Fall habe ich eine schnelle Übersicht aller Einzelseiten auf einer Webseite und kann so eine schnellere SEO Suchmaschinenoptimierung umsetzen.
Der gesamte get_pages_server Code zum kopieren
<?php
// Cache deaktivieren
header('Cache-Control: no-cache');
function getMetaDescription($url) {
$html = file_get_contents($url);
$doc = new DOMDocument();
@$doc->loadHTML($html);
$metaTags = $doc->getElementsByTagName('meta');
foreach ($metaTags as $metaTag) {
if ($metaTag->getAttribute('name') == 'description') {
return $metaTag->getAttribute('content');
}
}
return '';
}
function getSubPageUrls($url) {
$html = file_get_contents($url);
$doc = new DOMDocument();
@$doc->loadHTML($html);
$subPageUrls = array();
$links = $doc->getElementsByTagName('a');
foreach ($links as $link) {
$subUrl = $link->getAttribute('href');
if (strpos($subUrl, 'http') === false && strpos($subUrl, 'www') === false) {
$subUrl = $url . '/' . ltrim($subUrl, '/');
}
$subPageUrls[] = $subUrl;
}
return array_unique($subPageUrls);
}
if (isset($_GET['url'])) {
$url = $_GET['url'];
$subPageUrls = getSubPageUrls($url);
$pagesData = array();
$articlesLimit = 30;
$articlesCount = 0;
foreach ($subPageUrls as $subPageUrl) {
$html = file_get_contents($subPageUrl);
$doc = new DOMDocument();
@$doc->loadHTML($html);
$pageTitles = $doc->getElementsByTagName('title');
foreach ($pageTitles as $pageTitle) {
$title = $pageTitle->nodeValue;
$titleLength = strlen($title);
$metaDescription = getMetaDescription($subPageUrl);
$metaDescriptionLength = strlen($metaDescription);
$name = basename(parse_url($subPageUrl, PHP_URL_PATH));
$pagesData[] = array(
'title' => $title,
'title_length' => $titleLength,
'meta_description' => $metaDescription,
'meta_description_length' => $metaDescriptionLength,
'name' => $name
);
$articlesCount++;
if ($articlesCount >= $articlesLimit) {
break 2; // Exit both inner and outer loop once the article limit is reached
}
}
}
// Daten als JSON zurückgeben
header('Content-Type: application/json');
echo json_encode($pagesData);
}
?>
Dieses PHP-Skript ermöglicht es, eine URL zu übergeben und Informationen über die verknüpften Unterseiten abzurufen, einschließlich ihrer Titel, Titellängen und Meta-Beschreibungen. Die gesammelten Informationen werden als JSON-Daten zurückgegeben.
Hier ist eine detaillierte Erklärung des Skripts:
1. `header(‘Cache-Control: no-cache’);`:
Diese Anweisung deaktiviert das Caching des Skripts, was bedeutet, dass der Browser jedes Mal eine aktuelle Version des Skripts vom Server anfordern muss, anstatt eine zwischengespeicherte Version zu verwenden.
2. `getMetaDescription($url)`:
Diese Funktion erhält eine URL als Parameter und sucht nach der Meta-Beschreibung (`<meta name=”description” content=”…”>`) in der HTML-Seite der angegebenen URL. Falls eine Meta-Beschreibung gefunden wird, wird ihr Inhalt zurückgegeben. Andernfalls wird ein leerer String zurückgegeben.
3. `getSubPageUrls($url)`:
Diese Funktion erhält eine URL als Parameter und extrahiert die URLs der Unterseiten, die mit dieser URL verknüpft sind. Der Ablauf ähnelt der in der vorherigen Antwort erklärten Funktion `getSubPageUrls()`. Auch hier werden die Unterseiten-URLs in einem Array gesammelt und zurückgegeben.
4. `if (isset($_GET[‘url’])) { … }`:
Wie zuvor prüft dieser Teil des Skripts, ob eine `url`-Variable über GET-Parameter übergeben wurde. Wenn ja, bedeutet dies, dass der Benutzer eine URL in das Formular des vorherigen Skripts eingegeben und auf den “Seiten auslesen” Button geklickt hat.
5. `foreach ($subPageUrls as $subPageUrl) { … }`:
Für jede der gefundenen Unterseiten-URLs wird eine Schleife durchlaufen, um die Informationen zu sammeln. Hier wird der HTML-Inhalt jeder Unterseite abgerufen und analysiert. Zusätzlich zum Titel der Seite wird auch die Meta-Beschreibung der Seite durch Aufruf der Funktion `getMetaDescription()` abgerufen.
6. `$articlesLimit`:
Wie zuvor ist dies eine Variable, die die maximale Anzahl der gesammelten Unterseiten-Titel begrenzt.
7. JSON-Daten erstellen und zurückgeben:
Die gesammelten Informationen über die Unterseiten, einschließlich Titel, Titellänge, Meta-Beschreibung und Meta-Beschreibungslänge, werden in ein assoziatives Array `$pagesData` gespeichert. Dieses Array wird später in JSON umgewandelt und als Antwort zurückgegeben. Die JSON-Daten enthalten die Informationen über alle gesammelten Unterseiten.
Die Verwendung des `header(‘Content-Type: application/json’);`-Headers sorgt dafür, dass die Antwort als JSON-Daten interpretiert wird, wenn sie von JavaScript oder einer anderen Sprache aufgerufen wird. Dadurch können die Daten leicht verarbeitet und angezeigt werden.
Der gesamte index.html Code zum kopieren
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<script>
// Funktion zum Ausführen des Formulars mit PIN-Überprüfung
function executeForm() {
var pin = document.getElementById('pin').value;
var correctPin = "1234";
if (pin === correctPin) {
// PIN korrekt, Formular ausführen
readPages();
} else {
// PIN falsch, Fehlermeldung anzeigen
alert("Falsche PIN! Das Formular kann nicht ausgeführt werden.");
}
}
function readPages() {
var url = document.getElementById('url').value; // URL aus dem Formular lesen
var spinner = document.getElementById('spinner');
// Den Spinner anzeigen, bevor die AJAX-Anfrage gesendet wird
spinner.style.display = 'block';
// AJAX-Anfrage an PHP-Datei auf dem Server senden, um die Seiteninhalte abzurufen
var timestamp = new Date().getTime(); // Zufälliger Zeitstempel
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://deineurl.com/get_pages_server.php?url=' + encodeURIComponent(url) + '×tamp=' + timestamp, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// Antwort von PHP empfangen
var pagesData = JSON.parse(xhr.responseText);
var maxSubPages = parseInt(document.getElementById('maxSubPages').value); // Anzahl der Unterseiten auslesen
displayPages(pagesData, maxSubPages); // JavaScript-Funktion, um die Daten anzuzeigen
// Den Spinner ausblenden, wenn die Daten geladen sind
spinner.style.display = 'none';
}
};
xhr.send();
}
function displayPages(pagesData, maxSubPages) {
// Den Seiteninhalt in eine HTML5-Tabelle einfügen, um ihn anzuzeigen
var resultDiv = document.getElementById('result');
var html = '<table id="resultTable">';
html += '<thead><tr><th>Name</th><th>Titel</th><th>Titellänge</th><th>Meta-Description</th><th>Meta-Description-Länge</th></tr></thead>';
html += '<tbody>';
var count = 0;
pagesData.forEach(function (page) {
if (count < maxSubPages) {
html += '<tr><td>' + page.name + '</td><td>' + page.title + '</td><td>' + page.title_length + '</td><td>' + page.meta_description + '</td><td>' + page.meta_description_length + '</td></tr>';
count++;
}
});
html += '</tbody>';
html += '</table>';
resultDiv.innerHTML = html;
// Die Tabelle sortierbar machen (Aktivierung des Sortierungs-Plugins)
$("#resultTable").tablesorter();
}
</script>
<form id="urlForm">
<label for="url">URL eingeben:</label>
<input type="text" id="url" name="url">
<label for="maxSubPages">Anzahl der Unterseiten:</label>
<input type="number" id="maxSubPages" name="maxSubPages" value="30" min="1">
<label for="pin">PIN eingeben:</label>
<input type="password" id="pin" name="pin">
<button type="button" onclick="executeForm()">Seiten auslesen</button>
<img decoding="async" src="https://deineurl.com/spinner.gif" id="spinner" style="display: none;" alt="Loading..." />
</form>
<div id="result"></div>
Diese Programmierung zeigt ein interaktives Webformular, das es Benutzern ermöglicht, eine URL einzugeben, eine PIN einzugeben und dann auf einen Button zu klicken, um die Unterseiten der angegebenen URL abzurufen und Informationen darüber anzuzeigen. Die angezeigten Informationen werden in einer HTML-Tabelle präsentiert und können durch Klicken auf die Tabellenüberschriften sortiert werden.
Hier ist eine schrittweise Erklärung der Programmierung:
1. Die beiden `<script>`-Tags laden zwei externe JavaScript-Bibliotheken:
jQuery und jQuery-TableSorter. jQuery ist eine beliebte JavaScript-Bibliothek, die die Arbeit mit HTML-Dokumenten vereinfacht, während jQuery-TableSorter ein Plugin ist, um die HTML-Tabelle sortierbar zu machen.
2. Es gibt drei JavaScript-Funktionen:
– `executeForm()`: Diese Funktion wird aufgerufen, wenn der Benutzer auf den “Seiten auslesen” Button klickt. Sie überprüft die eingegebene PIN und ruft dann die Funktion `readPages()` auf, um die Seiteninhalte abzurufen, wenn die PIN korrekt ist. Andernfalls wird eine Fehlermeldung angezeigt.
– `readPages()`: Diese Funktion liest die eingegebene URL aus dem Formular und zeigt einen Lade-Spinner an. Anschließend wird eine AJAX-Anfrage an eine PHP-Datei auf dem Server gesendet, um die Seiteninhalte abzurufen. Sobald die Antwort vom Server empfangen wird, werden die Daten in der Funktion `displayPages()` angezeigt.
– `displayPages(pagesData, maxSubPages)`: Diese Funktion nimmt die Seiteninhalte und die maximale Anzahl der anzuzeigenden Unterseiten entgegen und erstellt eine HTML-Tabelle, die die Daten in den entsprechenden Tabellenzellen anzeigt. Die Tabelle wird in das HTML-Div mit der ID “result” eingefügt und anschließend mit Hilfe des jQuery-TableSorter-Plugins sortierbar gemacht.
3. Das HTML-Formular
enthält Eingabefelder für die URL, die maximale Anzahl der Unterseiten und die PIN. Wenn der Benutzer auf den “Seiten auslesen” Button klickt, wird die Funktion `executeForm()` aufgerufen.
4. Es gibt ein HTML-Div
mit der ID “result”, das verwendet wird, um die Tabelle mit den Seiteninhalten anzuzeigen.
5. Der Lade-Spinner
wird in einem `<img>`-Tag mit der ID “spinner” angezeigt und ist standardmäßig mit `display: none;` ausgeblendet. Wenn die AJAX-Anfrage läuft, wird der Spinner angezeigt, und wenn die Daten geladen sind, wird er wieder ausgeblendet.
Zusammenfassend ermöglicht dieses Skript dem Benutzer, eine URL einzugeben und die Unterseiten der angegebenen URL abzurufen. Die Seiteninhalte werden in einer sortierbaren HTML-Tabelle angezeigt. Die PIN-Überprüfung dient als einfache Sicherheitsmaßnahme, um sicherzustellen, dass nur autorisierte Benutzer das Formular ausführen können.
