[JAVA Script] Wird nur bei Neu Laden ausgeführt.

[Rene K. (xdraconix)]

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?

[maler und landstreicher (Gast)]

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.

[Rene K. (xdraconix)]

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

Danke dennoch für die Antwort :-)

[maler und landstreicher (Gast)]

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

[Daniel A. (daniel-a)]

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.

[Rene K. (xdraconix)]

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.