HTML-Code einer fremden Webseite auslesen - geht das mit Javascript

marlem · 5. Feb 2020

Hallo,

in einem HTML-Eingabefeld kann ein Anwender eine Webadresse eingeben.
Nun möchte ich den HTML-Code der angegeben Webadresse auslesen?

Geht das mit Javascript? Wenn ja wie?

M.L. · 5. Feb 2020

So etwas nennt sich Web Scraping und geht auch mit JavaScript (neben Java, Python, Perl, C#, Node.js...): https://www.codementor.io/@hirenpat...pt-web-scraping-libraries-and-tools-sicow2rx9

marlem · 5. Feb 2020

Vielen Dank.

abc66 · 5. Feb 2020

Möchts Du einen Web Crawler schreiben? Das hab ich auch mal, ist eigentlich nicht so schwer. Meiner hatte Wörter gesammelt um damit ein Dictionary zu befüllen...

marlem · 5. Feb 2020

Ich möchte eine Webseite auf folgende Kriterien überprüfen:

Überprüfen ob Alt-Attribut vorhanden ist bei img-Tag
Überprüfen ob es in der HTML-Datei H-Tags gibt
Überprüfen des Farbkontrasts zwischen Hintergrund und Schriftfarbe in CSS-Abschnitt oder CSS-Datei
CSS-Überprüfen ob Schriftgrößen mit em oder % angegeben wurden.
Überprüfen im CSS-Abschnitt oder CSS-Datei input:focus { background-color:yellow;}
Überprüfen auf lang-attribut <html xml:lang="de" lang="de">
Überprüfen mit https://validator.w3.org/

Kannst Du mir eine Starthilfe geben?

mrBrown · 5. Feb 2020

Es gibt doch schon einige Seiten, die genau das machen - ist es nicht vielleicht sinnvoller, eine von denen zu nutzen?

marlem · 5. Feb 2020

mrBrown hat gesagt.:
Es gibt doch schon einige Seiten, die genau das machen - ist es nicht vielleicht sinnvoller, eine von denen zu nutzen?

Die sind nicht gut bzw. können nur sehr wenig überprüfen.
Ich möchte versuchen was zu programmieren was besser ist.

mrBrown · 5. Feb 2020

Dürfte rein Client-Seitig nicht problemlos umsetzbar sein (zB wegen CORS), wird man also Serverseitig lösen müssen.

Da würde ich persönlich auf ein schon bestehendes Projekt aufsetzen, anstatt das ganz neu zu machen. Allein wird das tendenziell ein Ding der Unmöglichkeit, allein schon wegen den sehr tiefen HTML- und CSS-Kentnissen, die man allein für die oben genannten Beispiele braucht (zB braucht man für Accessibility keine h-Tags, Überschriften sind auch anders lösbar).

Lighthouse zB ist OpenSource und in JS geschrieben, da könnte man eigene Checks ergänzen und es profitiert nahezu jeder Webentwickler ohne zutun davon.

marlem · 6. Feb 2020

Zwischenstand:

Javascript:

function AlternativtextBeiBild(vBildname) {
    var vAlternativeText = document.getElementById(vBildname).alt;
    if (isBlank(vAlternativeText) == true){
        alert("FEHLER: Bild hat kein Alternativtext");
    }
        else {alert("Der Alternativtext lautet: " + vAlternativeText);}
}

function FontVerwendet(){
    vHTML = document.getElementsByTagName('html')[0].innerHTML;
    vHTML = vHTML.toLowerCase();
    vGefunden = vHTML.indexOf("<font");
    if (vGefunden > 0){
        alert("FEHLER: Font-Tag wurde verwendet");
    }
    else {alert("BRAVO! Kein Font-Tag verwendet!")};
}

function UeberschriftenTagsVerwendet() {
    vHTML = document.getElementsByTagName('html')[0].innerHTML;
    vHTML = vHTML.toLowerCase();
    vGefundenH1 = vHTML.indexOf("<h1>");
    vGefundenH2 = vHTML.indexOf("<h2>");
       
    if ((vGefundenH1 == -1) && (vGefundenH2 > 0)){
        alert("FEHLER: Es wurde keine H1-Überschrift verwendet");  
    } else

    if ((vGefundenH1 > 0) && (vGefundenH2 == -1)){
        alert("FEHLER: Es wurde keine H2-Überschrift verwendet");  
    } else
   
    if ((vGefundenH1 == -1) && (vGefundenH2 == -1)){
        alert("FEHLER: Überschriften wurden nicht richtig verwendet");  
    } else
       
    if ((vGefundenH1 > 0 ) && (vGefundenH2 > 0)){
        alert("Bravo! Überschriften vorbildlich verwendet");  
    }
       
}

function isBlank(str) {
    return (!str || /^\s*$/.test(str));
}

mihe7 · 7. Feb 2020

Warum suchst Du im String nach Tagnamen? Du hast doch ein DOM, das ist wesentlich robuster. Beispielsweise dürftest Du mit Deinem Code keine Überschriften finden, die Attribute haben.

Javascript:

function containsTag(elem, tagName) {
    return elem.getElementsByTagName(tagName).length > 0;
}

Der Parameter elem ist dazu da, sich auf Teile des DOMs zu beschränken. Für das ganze Dokument würdest Du document übergeben.

marlem · 7. Feb 2020

Du hast doch ein DOM, das ist wesentlich robuster.

Danke für den Hinweis. Ich schaue es mir an!

marlem · 7. Feb 2020

return elem.getElementsByTagName(tagName).length > 0;

Diese Zeile scheint ein Problem zu sein.

Uncaught TypeError: elem.getElementsByTagName is not a function

Wie muss ich Deine Funktion aufrufen?

marlem · 7. Feb 2020

Ich habe es:

Javascript:

function containsTag(elem, tagName) {
    return elem.getElementsByTagName(tagName).length;
}

function FontVerwendet(){
    if (containsTag(document,"font") > 0){
        alert("FEHLER: Font-Tag wurde verwendet");
    }
    else {alert("BRAVO! Kein Font-Tag verwendet!")};
}


function UeberschriftenTagsVerwendet() {
    vFehlermeldung = "";
    if (containsTag(document,"h1") == 0){
        vFehlermeldung = "H1-Tag";
    }
    
    if (containsTag(document,"h2") == 0){
        vFehlermeldung = vFehlermeldung + " H2-Tag";
    }   
    
    if (vFehlermeldung.length > 0)
    vFehlermeldung = vFehlermeldung + " fehlt!";
    
    if (vFehlermeldung.length == 0)
    {vFehlermeldung = "Überschriften wurden korrekt verwendet!"};
    alert(vFehlermeldung);
}

mihe7 · 7. Feb 2020

Die Vergleiche auf "> 0" bzw. " == 0" dürftest Du Dir sparen können, da die Funktion ja true/false liefert. Also z. B. einfach

Javascript:

if (!containsTag(document, "h1")) { ... }
// oder
if (containsTag(document, "font")) { ... }

Wenn Du immer document übergibst, kannst Du das natürlich auch in der Funktion direkt ersetzen, ich dachte halt, es wäre ggf. keine schlechte Idee, auch nur Teilbäume des DOMs überprüfen zu können.

marlem · 7. Feb 2020

Javascript:

function containsTag(elem, tagName) {
    return elem.getElementsByTagName(tagName).length;
}

Warum bist Du der Meinung, dass bei dieser Funktion true oder false zurückgegeben wird?

marlem · 7. Feb 2020

Alternativtexte bei Bilder abfragen funktioniert auch:

Javascript:

function AlternativtextBeiBilder() {
    for (var i = 0; i <= document.images.length  ; i++) {
        if (isBlank(document.images[i].alt) == true){
        alert("FEHLER: Bild" + document.images[i].src + " hat kein Alternativtext");
        }
    }
}

mihe7 · 7. Feb 2020

mihe7 hat gesagt.:
Warum bist Du der Meinung, dass bei dieser Funktion true oder false zurückgegeben wird?

Sorry, falsch gesehen, bin wohl versehentlich zu meiner Funktion gescrollt

Allerdings würde ich die Funktion in Deiner Form auch nicht mit containsTag sondern eher mit etwas wie countElements bezeichnen.

marlem · 7. Feb 2020

Allerdings würde ich die Funktion in Deiner Form auch nicht mit containsTag sondern eher mit etwas wie countElements bezeichnen.

countTags finde ich besser

marlem · 9. Feb 2020

Zum Thema auf eine fremde Webseite zugreifen.
Meint Ihr damit geht es auch:

Using the Fetch API - Web APIs | MDN

The Fetch API provides a JavaScript interface for making HTTP requests and processing the responses.

developer.mozilla.org

mihe7 · 9. Feb 2020

marlem hat gesagt.:
Meint Ihr damit geht es auch:

Ich zitiere:

mrBrown hat gesagt.:
Dürfte rein Client-Seitig nicht problemlos umsetzbar sein (zB wegen CORS), wird man also Serverseitig lösen müssen.

Beispielsweise wird fetch('https://www.java-forum.org') einen Fehler liefern, wenn es von einer anderen Seite ausgeführt wird (No 'Access-Control-Allow-Origin' header is present on the requested resource.)

	Titel	Forum	Antworten	Datum
M	JavaScript/HTML/CSS Hilfe	HTML / CSS	1	3. Dez 2023
V	externes CSS in html	HTML / CSS	6	12. Apr 2023
V	Horizontales Scroll-HTML	HTML / CSS	2	5. Apr 2023
V	Variablenname in meinem HTML-Objekt	HTML / CSS	3	9. Mrz 2023
	Löschen Button HTML	HTML / CSS	39	1. Aug 2021
	Html/Css Placeholder positionierung ändern	HTML / CSS	6	10. Apr 2021
	Hilfe bei HTML und CSS!	HTML / CSS	12	22. Okt 2020
	CSS in HTML via Link einbinden PROBLEM !	HTML / CSS	22	16. Okt 2020
	HTML Bei bestimmter eingabe in textfeld neu HTML Seite öffnen	HTML / CSS	6	3. Okt 2020
B	Bilder aus Server in HTML anzeigen	HTML / CSS	5	6. Jun 2020
B	Zeit für Doppelklick messen (HTML/JS)	HTML / CSS	3	9. Mai 2020
M	Javascript: HTML-Datei erstellen und auf Festplatte speichern	HTML / CSS	8	14. Feb 2020
U	Html Funktion Java Funktion zuweisen	HTML / CSS	2	9. Dez 2019
D	Daten von einer HTML Datei auf eine andere HTML Datei bekommen	HTML / CSS	2	17. Apr 2019
E	HTML DOM	HTML / CSS	1	1. Mrz 2019
A	Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript)	HTML / CSS	11	28. Feb 2019
	HTML bei button click Formular an php senden aber andere seite öffnnen	HTML / CSS	23	5. Feb 2019
	Mehrere css Dateien in eine HTML Seite einbinden	HTML / CSS	3	31. Jan 2019
	Variable vom Get Request in HTML abfangen	HTML / CSS	9	28. Jan 2019
A	Mit Modal (Bootstrap) eine html Seite anzeigen, die von id abhängig ist	HTML / CSS	0	22. Nov 2018
D	HTML- Formulare an den Server senden	HTML / CSS	7	14. Sep 2018
S	Quiz mit HTML/PHP erstellen	HTML / CSS	3	29. Jan 2018
W	Keylistener Applet in Html	HTML / CSS	9	3. Jan 2018
S	HTML Datei per E-Mail versenden	HTML / CSS	3	13. Dez 2017
K	Html Programmieroberfläche einbinden (java)	HTML / CSS	1	27. Nov 2017
	Unfertige HTML Ersetzungsfunktion	HTML / CSS	1	22. Okt 2017
T	[JS] Extrahiere werte aus HTML Tabelle (td) aber nur bestimmten Teil	HTML / CSS	5	12. Okt 2017
K	Verständnis von HTML/CSS & JScript	HTML / CSS	2	25. Aug 2017
	mit HTML auf php zugreifen	HTML / CSS	1	5. Feb 2017
I	zugehörige HTML bzw. PHP Datei in den Entwicklertools finden	HTML / CSS	3	31. Jan 2017
D	Hilfe bei erster Html-Aufgabe (Rahmen)	HTML / CSS	6	20. Mai 2016
	HTML Text rotieren	HTML / CSS	2	25. Nov 2015
K	How to create Html tables for java parser objects?	HTML / CSS	2	30. Jul 2015
	HTML interner Link soll neues Fenster aufmachen	HTML / CSS	2	22. Jul 2015
H	javascript - html Beispiel LQH, verwirklichung	HTML / CSS	1	21. Jun 2015
I	Menü, Header, Content ausgliedern aus einer HTML Seite	HTML / CSS	2	26. Mai 2015
G	HTMl Tabellen-Zelle zeilen oder Höhe begrenzen	HTML / CSS	1	29. Dez 2014
O	HTML/CSS doppeltes DropDown Menu	HTML / CSS	1	17. Dez 2013
B	Mega Menü , CSS Code bearbeiten an 2 Stellen , OneKlick and Close	HTML / CSS	2	20. Mai 2020
C	php-code wird falsch angezeigt	HTML / CSS	8	13. Feb 2020
N	Zustand eines Widget's per Code auslösen	HTML / CSS	1	10. Okt 2017
N	Code an Mail senden	HTML / CSS	1	17. Jun 2017
D	Code Fehlerhaft finde den Fehler nicht.	HTML / CSS	0	24. Mrz 2014
T	Sichtbarkeit einer Seite	HTML / CSS	1	15. Mrz 2020
M	Javascript: Farbkontrast überprüfen auf einer Webseite	HTML / CSS	14	13. Feb 2020
F	Variable einer jsp auf eine tag.java Klasse übergeben	HTML / CSS	3	4. Jan 2020
T	Nutze Textfelder, um Datenpunkte in einer Zeitreihe ein- und auszublenden	HTML / CSS	0	10. Okt 2019
J	JSF eine Datei uploaden in einer ConfirmDialog von PrimeFaces	HTML / CSS	0	25. Feb 2018
P	Link innerhalb/außerhalb einer Liste	HTML / CSS	1	8. Dez 2017
A	Inhalt einer divbox per Link ändern	HTML / CSS	7	8. Sep 2016
V	Automatisiertes Anmelden auf einer Website	HTML / CSS	2	8. Sep 2015
J	Javascript im DOM einer Webseite ändern	HTML / CSS	1	11. Jul 2015
A	Aufwand und Kosten einer Webseite	HTML / CSS	7	15. Jun 2015
E	2 text eingaben in einer function ?	HTML / CSS	2	19. Jan 2015

HTML-Code einer fremden Webseite auslesen - geht das mit Javascript

Bekanntes Mitglied

Top Contributor

Bekanntes Mitglied

Top Contributor

Bekanntes Mitglied

Super-Moderator

Bekanntes Mitglied

Super-Moderator

Bekanntes Mitglied

Top Contributor

Bekanntes Mitglied

Bekanntes Mitglied

Bekanntes Mitglied

Top Contributor

Bekanntes Mitglied

Bekanntes Mitglied

Top Contributor

Bekanntes Mitglied

Bekanntes Mitglied

Top Contributor

Ähnliche Java Themen