# 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:

```
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.


```
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:


```
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

```
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)

```
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:

```
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 accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.




					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.)


----------

