Forum: PC-Programmierung [JAVA Script] Wird nur bei Neu Laden ausgeführt.


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Rene K. (xdraconix)


Angehängte Dateien:

Bewertung
0 lesenswert
nicht lesenswert
Ich habe da ein Problem. Ich habe ein Javascript welches mir ein 
Bargraph zeichnet. Nun ist aber das Problem das es ausschließlich nur 
dann auseführt wird wenn die Seite neu geladen wird. Wenn ich das Script 
bzw. die dazugehörige Seite über das Menü aufrufe, dann wird dies nicht 
geladen.


Das JS script zum Bargraph:
<div id="container"></div>
<script src="scripts/progressbar.js"></script>
<script>
var bar = new ProgressBar.SemiCircle(container, 
    {
        strokeWidth: 6,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 1,
        easing: 'easeInOut',
        duration: 1400,
        svgStyle: null,
        text: 
        {
            value: '',
            alignToBottom: false
        },
        from: {color: '#FFEA82'},
        to: {color: '#ED6A5A'},
        // Set default step function for all animate calls
        step: (state, bar) => 
        {
            bar.path.setAttribute('stroke', state.color);
            var value = Math.round(bar.value() * 100);
            if (value === 0) 
            {
                bar.setText('');
            } else {
                bar.setText(value);
            }

        bar.text.style.color = state.color;
        }
    });
    
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1);  // Number from 0.0 to 1.0
</script>



Wenn ich nun dieses Script direkt beim Seitenlade aufrufe geht es (siehe 
Bild) wenn ich nun bei Start eine andere Seite habe (Startseite) und 
dann links über das Menü (Round Bar) gehe, funktioniert dies nicht.

Nun wird aber die Seite über ein Query String nachgeladen in dem 
Navigationsbereich:


function load_home(siteLink) 
{
    fetch(siteLink /*, options */)
    .then((response) => response.text())
    .then((html) => {
        document.getElementById("content").innerHTML = html;
    })
    .catch((error) => {
        console.warn(error);
    });
} 



Kann dies damit zusammenhängen?

: Bearbeitet durch User
von maler und landstreicher (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Rene K. schrieb:
> Kann dies damit zusammenhängen?

ja.
denk mal drüber nach was da in welcher zeitlichen abfolge passiert.

tipp: du wirst eine callback funktion brauchen.

von Rene K. (xdraconix)


Bewertung
0 lesenswert
nicht lesenswert
Ich habe nun doch einen kompletten Seitenrefresh gemacht. Fällt da nicht 
so in das Gewicht.

Danke dennoch für die Antwort :-)

von maler und landstreicher (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Rene K. schrieb:
> Ich habe nun doch einen kompletten Seitenrefresh gemacht.

genau das ist der springende punkt. die funktion zum zeichnen des 
bargraphen wird nur einmal bei pageload aufgerufen. die dom-manipulation 
führt die kein zweites mal aus

von Daniel A. (daniel-a)


Bewertung
0 lesenswert
nicht lesenswert
Das Problem ist ein ganz anderes.
document.body.innerHTML = '<script>alert("test");</script>';
Aus Schutz vor XSS wird bei sowas des script tag hier nicht ausgeführt.
Dann musst du die scripts halt selbst Rausfiltern & durch eval jagen, 
wenn du das wirklich so machen willst.

Siehe dir auch mal document.createDocumentFragment und WebComponents an.

: Bearbeitet durch User
von Rene K. (xdraconix)


Angehängte Dateien:

Bewertung
0 lesenswert
nicht lesenswert
maler und landstreicher schrieb:
> genau das ist der springende punkt. die funktion zum zeichnen des
> bargraphen wird nur einmal bei pageload aufgerufen. die dom-manipulation
> führt die kein zweites mal aus

Der Befehl zum Zeichen (onload='function..') läge aber in einem div das 
nachgeladen wurde. Aaaaaaber...

Daniel A. schrieb:
> Aus Schutz vor XSS wird bei sowas des script tag hier nicht ausgeführt.

.... Da macht das alles wieder Sinn. Ich verstehe auch den Sinn dahinter 
dir Scriptausführung danach / dabei zu verhindern. Logisch gesehen ist 
dies für Injections ein großes Scheunentor.

Daniel A. schrieb:
> Dann musst du die scripts halt selbst Rausfiltern & durch eval jagen,
> wenn du das wirklich so machen willst.
>
> Siehe dir auch mal document.createDocumentFragment und WebComponents an.

Nein in diesem Fall mach ich es "altmodisch" und lade die gesamte neu. 
Mich persönlich stört das überhaupt nicht, da sich eh fast alles auf der 
Hauptseite abspielt und ausschließlich für meinen privaten Gebrauch 
gedacht ist.

Dennoch werde ich mir das mal anschauen. Man lernt ja nie aus ☺️

Die Bargraphen (siehe Bild) laufen nun auch absolut sauber, über Ajax 
gefüttert, durch.

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.