[gelöst] HTML in VIS ändert Aussehen/Inhalt Editor

Heinz2100

Hallo, bei mir ändert sich teilweise der VIS-Editor (Abstände, Spracht, Inhalt), wenn ich ein HTML-Feld einfüge und dort Code programmiere. Wie kann man das umgehen? Ist das normal?

Screenshot 2023-06-12 103103.jpg

OliverIO

@heinz2100

dann hast du wahrscheinlich auch css-anweisungen hinzugefügt.
CSS wirkt immer auf das komplette html dokument, auch wenn es nur in einem html-widget eingetragen wurde

du musst deine css anweisungen kapseln, so das sie tatsäclich nur die elemente im widget betreffen.

dazu zeigst du am besten mal deinen code

Heinz2100

@oliverio Das wäre beispielsweise folgender Code:

<!DOCTYPE html>
<html>
<head>
    <title>Tagesschau.de - Alle Meldungen</title>
</head>
<body>
    <h1>Tagesschau.de - Alle Meldungen</h1>
    <ul>
        <script>
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var xmlDoc = this.responseXML;
                    var items = xmlDoc.getElementsByTagName("item");

                    // Umgekehrte Schleife, um Artikel von neu nach alt zu sortieren
                    for (var i = items.length - 1; i >= 0; i--) {
                        var title = items[i].getElementsByTagName("title")[0].textContent;
                        var link = items[i].getElementsByTagName("link")[0].textContent;
                        var pubDate = items[i].getElementsByTagName("pubDate")[0].textContent;

                        var listItem = document.createElement("li");
                        var linkElement = document.createElement("a");
                        linkElement.href = link;
                        linkElement.textContent = title;
                        listItem.appendChild(linkElement);
                        listItem.innerHTML += " - " + pubDate;
                        document.querySelector("ul").appendChild(listItem);
                    }
                }
            };
            xhttp.open("GET", "https://www.tagesschau.de/infoservices/alle-meldungen-100~rss2.xml", true);
            xhttp.send();
        </script>
    </ul>
</body>
</html>

Heinz2100

@oliverio Hab dann nicht mehr weiterprogrammiert. Eigentlich wollte ich mir mit dem HTML die Inhalte des RSS Feeds Tagesschau ziehen. Der RSS Adapter funktioniert bei mir nämlich irgendwie nicht so gut. Die Widgets werden nur angezeigt, wenn ich den ioBroker neu starte und dann ist der VIS-Editor auf einmal auf Englisch bzw. es ist gar keine Sprachwahl mehr möglich.

OliverIO

@heinz2100

Ich sehe 2.Punkte
1)
Das hinzufügen des html-Tags innerhalb eines html Tags ist nicht zulässig.
Deine. Vorlage war gedacht als eigenständige Seite zu funktionieren.
Trage in das html Widget nur den Code zwischen den Body Tags hinzu.

Der Befehl in Zeile 28

document.querySelector("ul")

Sucht den ersten Tag ul im Dokument und fügt dort dann alle gefundenen rss Inhalte hinzu
Wenn im gesamten Dokument genau nur ein ul zu finden ist, passt das.
In vis sind aber wahrscheinlich ganz viele ul vorhanden.
Also werden die Elemente halt beim ersten gefundenen hinzugefügt.

Ich würde dem ul Tag ein class Attribut mit einem eindeutigen Namen

<ul class=„myul“></ul>

hinzufügen und die Zeile 28 dann mit dem Befehl tauschen


document.querySelector(".myul").appendChild(listItem);

Außerdem würde ich den Script Anteil aus dem ul element heraus verschieben.

Die Anführungsstriche sind natürlich immer die gleichen, also oben. Das iPad macht mir hier aber immer die lexikalischen, also erst unten und dann oben.

Community Forum

NEWS

[gelöst] HTML in VIS ändert Aussehen/Inhalt Editor

Support us

574

32.8k

82.8k

1.3m