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

M

marlem

Bekanntes Mitglied
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ö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...
 
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?
 
Es gibt doch schon einige Seiten, die genau das machen - ist es nicht vielleicht sinnvoller, eine von denen zu nutzen?
 
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.
 
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));
}
 
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.
 
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);
}
 
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.
 
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?
 
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");
        }
    }
}
 

Aktuelle Jobs

Neue Themen

Ähnliche Themen

HTML-Code von Webseite über Browser oder Console auslesen??
Antworten: 5
Webseite(mit JavaScript-Element) mit Java auslesen
Antworten: 0
Benutzung von fremden Java-Code mit Eclipse
Antworten: 3
Problem mit fremden Code
Antworten: 2
Mit JavaScript erzeugte dynamische Webseite auslesen und nach einem Schlüsselwort durchsuchen
Antworten: 6

Zurück
Oben