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?
 
A

abc66

Top Contributor
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...
 
M

marlem

Bekanntes Mitglied
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

mrBrown

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

mrBrown

Super-Moderator
Mitarbeiter
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.
 
M

marlem

Bekanntes Mitglied
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

mihe7

Top Contributor
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.
 
M

marlem

Bekanntes Mitglied
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

mihe7

Top Contributor
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.
 
M

marlem

Bekanntes Mitglied
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?
 
M

marlem

Bekanntes Mitglied
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

mihe7

Top Contributor
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.
 
M

marlem

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

mihe7

Top Contributor
Ähnliche Java Themen
  Titel Forum Antworten Datum
PhilipMJNE Hilfe bei HTML und CSS! HTML / CSS 12
PhilipMJNE CSS in HTML via Link einbinden PROBLEM ! HTML / CSS 22
VPChief HTML Bei bestimmter eingabe in textfeld neu HTML Seite öffnen HTML / CSS 6
B Bilder aus Server in HTML anzeigen HTML / CSS 5
B Zeit für Doppelklick messen (HTML/JS) HTML / CSS 3
M Javascript: HTML-Datei erstellen und auf Festplatte speichern HTML / CSS 8
U Html Funktion Java Funktion zuweisen HTML / CSS 2
D Daten von einer HTML Datei auf eine andere HTML Datei bekommen HTML / CSS 2
E HTML DOM HTML / CSS 1
A Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript) HTML / CSS 11
Dimax HTML bei button click Formular an php senden aber andere seite öffnnen HTML / CSS 23
Dimax Mehrere css Dateien in eine HTML Seite einbinden HTML / CSS 3
Dimax Variable vom Get Request in HTML abfangen HTML / CSS 9
A Mit Modal (Bootstrap) eine html Seite anzeigen, die von id abhängig ist HTML / CSS 0
D HTML- Formulare an den Server senden HTML / CSS 5
S Quiz mit HTML/PHP erstellen HTML / CSS 3
W Keylistener Applet in Html HTML / CSS 9
S HTML Datei per E-Mail versenden HTML / CSS 3
K Html Programmieroberfläche einbinden (java) HTML / CSS 1
_Andi84 Unfertige HTML Ersetzungsfunktion HTML / CSS 1
T [JS] Extrahiere werte aus HTML Tabelle (td) aber nur bestimmten Teil HTML / CSS 5
K Verständnis von HTML/CSS & JScript HTML / CSS 2
Pataraca mit HTML auf php zugreifen HTML / CSS 1
I zugehörige HTML bzw. PHP Datei in den Entwicklertools finden HTML / CSS 3
D Hilfe bei erster Html-Aufgabe (Rahmen) HTML / CSS 6
KaffeeFan HTML Text rotieren HTML / CSS 2
K How to create Html tables for java parser objects? HTML / CSS 2
EisKaffee HTML interner Link soll neues Fenster aufmachen HTML / CSS 2
H javascript - html Beispiel LQH, verwirklichung HTML / CSS 1
I Menü, Header, Content ausgliedern aus einer HTML Seite HTML / CSS 2
G HTMl Tabellen-Zelle zeilen oder Höhe begrenzen HTML / CSS 1
O HTML/CSS doppeltes DropDown Menu HTML / CSS 1
B Mega Menü , CSS Code bearbeiten an 2 Stellen , OneKlick and Close HTML / CSS 2
C php-code wird falsch angezeigt HTML / CSS 8
N Zustand eines Widget's per Code auslösen HTML / CSS 1
N Code an Mail senden HTML / CSS 1
D Code Fehlerhaft finde den Fehler nicht. HTML / CSS 0
T Sichtbarkeit einer Seite HTML / CSS 1
M Javascript: Farbkontrast überprüfen auf einer Webseite HTML / CSS 14
F Variable einer jsp auf eine tag.java Klasse übergeben HTML / CSS 3
T Nutze Textfelder, um Datenpunkte in einer Zeitreihe ein- und auszublenden HTML / CSS 0
J JSF eine Datei uploaden in einer ConfirmDialog von PrimeFaces HTML / CSS 0
P Link innerhalb/außerhalb einer Liste HTML / CSS 1
A Inhalt einer divbox per Link ändern HTML / CSS 7
V Automatisiertes Anmelden auf einer Website HTML / CSS 2
J Javascript im DOM einer Webseite ändern HTML / CSS 1
A Aufwand und Kosten einer Webseite HTML / CSS 7
E 2 text eingaben in einer function ? HTML / CSS 2

Ähnliche Java Themen

Anzeige

Neue Themen


Oben